<template>
    <div class="container">

        <div class="box">
            <!-- 处理成透明背景后的canvas -->
            <canvas ref="canvas" style="display:none;"></canvas>
            <!-- 地图上雨量气温的标注框 -->
            <div ref="info" class="info" style="display:none;">
            </div>
            <!-- 地图上气象景观的标注框 -->
            <div ref="landscapeinfo" class="landscapeinfo" style="display:none;"></div>
            <div class="left">
                <!-- 天气实况 -->
                <div class="weatherCondition">
                    <div class="title">
                        <span>天气实况</span> <span class="spot_title">{{ select_spot?.scenicName }}</span>
                    </div>
                    <div class="content">
                        <div class='collect_time'>
                            <span>数据采集时间:&ensp;&ensp;{{ WeatherCondition?.time }}</span>
                        </div>
                        <div class="detail">
                            <div class="rain">
                                <svg t="1724228422421" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="18379" width="64" height="64">
                                    <path
                                        d="M895.6 345.2c-29.6-29.6-66.5-51.5-107.2-64-9-2.8-15.7-10.4-17.4-19.6-3.4-18-9-35.5-16.9-52.4-13.1-28.3-31.8-53.6-55.6-75.3-48-43.8-111.6-67.9-179-67.9s-131 24.1-179.1 67.9c-23.8 21.7-42.5 47-55.6 75.3-8.3 17.8-14.1 36.4-17.4 55.4-3.6 20.8-19.4 37.2-39.8 42.4-36.1 9.1-69.3 26.7-96.6 51.7-42.8 39-66.4 91.2-66.4 147 0 54.2 22.4 105.3 63.1 144 26.2 24.9 58.3 42.9 93.4 52.9 28 8 56.1-12.3 57.3-41.4 0.8-20.9-12.9-39.4-33.1-45.2-52.9-15.1-90.7-58.8-90.7-110.3 0-63.9 59-115.9 131.5-115.9 7.4 0 14.8 0.5 22 1.6 45.5 6.8 83 34.2 99.9 70.7 8.3 17.9 27 28.4 46.5 26 30.1-3.8 48-35.7 35.3-63.2a205.14 205.14 0 0 0-45.1-62.9c-25.5-24.3-56.4-42.1-90.5-52.3-0.1-2.3-0.2-4.6-0.2-6.9 0-80.9 74.2-146.8 165.4-146.8s165.4 65.8 165.4 146.8c0 2.9-0.1 6-0.3 9.3l-1.4 19.3c-1 13.7 9.2 25.6 22.9 26.9l19.3 1.8c84.5 7.7 148.3 70.5 148.3 146 0 64.8-48.7 121.2-115.9 140.1-20.6 5.8-34.3 25.3-32.7 46.6 2.1 28.3 29.5 47.7 56.8 40.1C824.3 721.1 863 699 894 668.5c44.8-44.1 69.5-101.8 69.5-162.4 0-59.9-24.1-117-67.9-160.9z"
                                        p-id="18380" fill="#ffffff"></path>
                                    <path
                                        d="M614 588.1c-24.9 0-45 20.1-45 45v280.5c0 24.9 20.1 45 45 45s45-20.1 45-45V633.1c0-24.9-20.2-45-45-45zM441.2 588.1c-24.9 0-45 20.1-45 45v35.4c0 24.9 20.1 45 45 45s45-20.1 45-45v-35.4c0-24.9-20.2-45-45-45zM441.2 833.1c-24.9 0-45 20.1-45 45v35.4c0 24.9 20.1 45 45 45s45-20.1 45-45v-35.4c0-24.9-20.2-45-45-45z"
                                        p-id="18381" fill="#ffffff"></path>
                                </svg>
                                <span>雨量:</span><span
                                    style="font-weight:bold;margin-left:5px">{{ WeatherCondition?.rainfall ? WeatherCondition?.rainfall.toFixed(2) : '缺' }}mm</span>
                            </div>
                            <div class="temp">
                                <svg t="1724228248207" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="9475" width="64" height="64">
                                    <path
                                        d="M468.5 818.3c-50.5 0-91.6-41.1-91.6-91.6 0-50.5 41.1-91.6 91.6-91.6 50.5 0 91.6 41.1 91.6 91.6 0 50.5-41.1 91.6-91.6 91.6z m0-93.1v2.9l1.4-1.4c0-0.8-0.6-1.5-1.4-1.5z"
                                        fill="#ffffff" p-id="9476"></path>
                                    <path
                                        d="M466.8 962.2c-8.2 0-16.4-0.4-24.6-1.3-106.9-11.1-195-96.3-209.4-202.7-8.7-63.9 8.6-128 47.6-178V257c0-52.2 21.6-103.2 59.4-139.9 36.4-35.4 83.3-54 132.7-52.8 48 1.3 93.2 20.7 127.1 54.6 35.3 35.3 54.7 82.2 54.7 132.2v329.2c32.2 41.2 49.8 92.3 49.8 145.2 0 66.9-28.5 131-78.2 175.9-43.6 39.3-100.5 60.8-159.1 60.8z m0.9-807.8c-23.8 0-46.8 9.6-65 27.3-20.4 19.8-32.1 47.3-32.1 75.3v335.6c0 13.6-5 26.7-13.9 37-28.1 32.1-40.3 73.5-34.5 116.6 8.9 65.6 63.3 118.3 129.3 125.1 42.2 4.4 82.7-8.7 113.9-36.8 30.8-27.8 48.5-67.5 48.5-108.9 0-35.4-12.7-69.5-35.9-95.9-9-10.4-13.9-23.4-13.9-37V251.1c0-25.9-10-50.2-28.3-68.4-17.5-17.6-40.9-27.6-65.8-28.2-0.8-0.1-1.5-0.1-2.3-0.1zM288.8 570.2z"
                                        fill="#ffffff" p-id="9477"></path>
                                    <path
                                        d="M423.4 434.9h90.2v314.4h-90.2zM688.1 200.7h104v90.2h-104zM688.1 332.2h104v90.2h-104zM688.1 463.7h104v90.2h-104z"
                                        fill="#ffffff" p-id="9478"></path>
                                </svg>
                                <span>温度:</span><span
                                    style="font-weight:bold;margin-left:5px">{{ WeatherCondition?.temperature ? WeatherCondition?.temperature.toFixed(2) : '缺' }}℃</span>
                            </div>
                            <div class="windDirection">
                                <svg t="1724228395007" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="16294" width="64" height="64">
                                    <path
                                        d="M209.126761 897.802817c-14.422535 0-25.239437-7.211268-32.450705-18.028169-7.211268-10.816901-7.211268-25.239437-3.605633-36.056338 18.028169-43.267606 39.661972-86.535211 57.69014-129.802817L360.56338 432.676056c3.605634-10.816901 14.422535-21.633803 28.845071-28.84507 137.014085-61.295775 274.028169-122.591549 407.436619-183.887324 25.239437-10.816901 50.478873 0 57.690141 25.239437 0 10.816901 0 18.028169-3.605634 28.84507-57.690141 122.591549-111.774648 245.183099-169.464788 371.380282-7.211268 14.422535-10.816901 25.239437-18.028169 39.661972-3.605634 10.816901-10.816901 18.028169-21.633803 21.633802-137.014085 61.295775-274.028169 126.197183-414.647887 187.492958-7.211268 3.605634-10.816901 3.605634-18.028169 3.605634zM739.15493 331.71831c-3.605634 0-3.605634 0-7.211268 3.605634-100.957746 46.873239-201.915493 90.140845-302.873239 137.014084-3.605634 3.605634-7.211268 3.605634-7.211268 7.211268-39.661972 82.929577-75.71831 165.859155-115.380282 248.788732l-25.239436 54.084507c3.605634 0 7.211268-3.605634 7.211267-3.605634 100.957746-46.873239 198.309859-90.140845 299.267606-137.014084 3.605634-3.605634 7.211268-3.605634 7.211267-7.211268 25.239437-54.084507 50.478873-111.774648 75.71831-165.859155l68.507043-137.014084z m0 0"
                                        p-id="16295" fill="#ffffff"></path>
                                    <path
                                        d="M548.056338 558.873239c0 10.816901-3.605634 18.028169-10.816901 25.239437-7.211268 7.211268-18.028169 10.816901-28.845071 10.816901-21.633803 0-36.056338-18.028169-36.056338-39.661971 0-21.633803 18.028169-39.661972 39.661972-39.661972 21.633803 3.605634 39.661972 21.633803 36.056338 43.267605z m0 0"
                                        p-id="16296" fill="#ffffff"></path>
                                </svg>
                                <span>风向:</span><span style="font-weight:bold;margin-left:5px">{{ WeatherCondition?.windDirection ? solveWindDirection
                            (WeatherCondition?.windDirection) : '缺' }}</span>
                            </div>
                            <div class="windSpeed">
                                <svg t="1724228316015" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="13741" width="64" height="64">
                                    <path
                                        d="M174.5 394.1h331.2c91 0 166-73.2 166.3-164.2 0.3-91-73.7-165.1-164.7-165.1-43.2 0-84 16.6-114.9 46.7-15.5 15.1-27.7 32.9-36.2 52.2-12.7 29.1 8.4 61.7 40.1 62.6 18.5 0.5 35.2-10.4 42.6-27.3 11.6-26.2 37.7-44.2 68.3-44.2 41.4 0 75.1 33.9 74.7 75.4-0.4 41.1-34.5 73.9-75.6 73.9H174.5c-24.9 0-45 20.1-45 45s20.2 45 45 45zM189.3 634.2l0.6 45-0.6-45zM682 626.9c-0.6 0-0.8 0-427.3 6.3-7.3 0.1-14.2 0.2-20.5 0.3-24.8 0.4-44.7 20.8-44.3 45.6 0.3 24.9 20.8 44.8 45.7 44.4 6.3-0.1 13.2-0.2 20.5-0.3 124.9-1.9 415.3-6.2 426.2-6.3 42.8 0.2 77.2 36.5 74.2 80-2.8 39.8-35.9 70-75.7 69.3-30.2-0.5-55.9-18.5-67.2-44.5-7.3-16.8-24.1-27.5-42.5-27-31.7 0.9-52.8 33.5-40.1 62.6 8.4 19.4 20.6 37.1 36.2 52.2 30.9 30.1 71.8 46.7 115 46.7 91.8-0.1 166.8-77 164.5-168.8-2.3-88.9-75.3-160.5-164.7-160.5z"
                                        p-id="13742" fill="#ffffff"></path>
                                    <path
                                        d="M856.6 240.3c-29-11.5-60.5 10.1-60.5 41.4v1.3c0 18 10.9 34.4 27.6 41.1 27.5 11 47 38 47 69.4 0 41.2-33.5 74.7-74.7 74.7H112.6c-24.9 0-45 20.1-45 45s20.1 45 45 45h683.5c90.8 0 164.7-73.9 164.7-164.7-0.1-69.5-43.3-129-104.2-153.2z"
                                        p-id="13743" fill="#ffffff"></path>
                                </svg>
                                <span>风速:</span><span style="font-weight:bold;margin-left:5px">{{ WeatherCondition?.windSpeed ? WeatherCondition?.windSpeed
                            .toFixed(2) : '缺' }}m/s</span>
                            </div>
                        </div>

                    </div>

                </div>
                <!-- 景区实景 -->
                <div class="spotReality">


                    <div class="title">
                        <span>景区实景</span><span class="spot_title">{{ select_spot?.scenicName }}</span>
                    </div>
                    <div class="content">
                        <div class="monitor">
                            <!-- <video :src="monitor_url" controls></video> -->
                            <video ref="videosmallone" preload="auto" muted autoplay type="rtmp/flv">
                                <source src="" />
                            </video>

                        </div>

                    </div>

                </div>
                <!-- 旅游指数预报 -->
                <div class="indexForecast">
                    <div class="title">
                        <span>旅游指数预报</span><span class="spot_title">{{ select_spot?.scenicName }}</span>
                    </div>
                    <div class="content">
                        <div class="text">
                            <!-- <span v-for="item in this.select_spot?.travelIndexList" :key="item.name">
                  {{ item.name }}:{{ item.level }}级,{{ item.content }}
              </span> -->
                            <!-- 穿衣指数 -->
                            <span><svg t="1724229635226" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="1597" width="64" height="64">
                                    <path
                                        d="M282.37 226.32h206.22V835.3H282.37c-37.31 0-67.6-30.29-67.6-67.6V293.92c0-37.31 30.29-67.6 67.6-67.6z"
                                        fill="#57B7F9" p-id="1598"></path>
                                    <path
                                        d="M693.71 835.3H487.49V226.32h206.22c37.31 0 67.6 30.29 67.6 67.6V767.7c0 37.31-30.29 67.6-67.6 67.6z"
                                        fill="#33A1F2" p-id="1599"></path>
                                    <path d="M487.93 347.69l120.61-161.62H367.33l120.6 161.62z" fill="#33A1F2"
                                        p-id="1600"></path>
                                    <path
                                        d="M367.33 186.07l120.6 161.62-67.85 42.39c-7.74 4.83-17.96 1.2-20.92-7.43l-50.51-147.76a22.088 22.088 0 0 1 1.56-17.81l17.12-31.01zM608.84 186.07l-120.6 161.62 67.85 42.39c7.74 4.83 17.96 1.2 20.92-7.43l50.51-147.76a22.088 22.088 0 0 0-1.56-17.81l-17.12-31.01z"
                                        fill="#A1DCFF" p-id="1601"></path>
                                    <path
                                        d="M414.69 400.32c-3.04 0-6.1-0.52-9.06-1.57-7.78-2.76-13.8-8.81-16.51-16.61l-41.43-119.15c-1.81-5.22 0.94-10.92 6.16-12.73 5.22-1.81 10.92 0.94 12.73 6.16l41.43 119.15c0.97 2.78 3.11 3.9 4.3 4.33 1.19 0.42 3.56 0.9 6.06-0.65l52.43-32.51c10.63-6.59 24.32-6.51 34.87 0.21l50.46 32.15c2.48 1.58 4.86 1.13 6.06 0.73 1.2-0.41 3.35-1.5 4.35-4.27l43.09-119.23c1.88-5.19 7.61-7.88 12.8-6.01 5.19 1.88 7.88 7.61 6.01 12.8l-43.09 119.23c-2.81 7.76-8.9 13.75-16.71 16.41-7.82 2.66-16.29 1.65-23.25-2.79l-50.46-32.15c-4.11-2.62-9.44-2.65-13.58-0.08l-52.43 32.52c-4.35 2.7-9.26 4.07-14.22 4.07zM488.09 732c-5.52 0-10-4.48-10-10V415.72c0-5.52 4.48-10 10-10s10 4.48 10 10V722c0 5.52-4.48 10-10 10z"
                                        fill="#333333" p-id="1602"></path>
                                    <path
                                        d="M257.27 239.94v530.02s-1.57 25.58 29.58 25.58h159.63V836H275.69s-56.37-16.09-56.37-66.04V282.68s5.23-38.8 37.95-42.74z"
                                        fill="#33A1F2" p-id="1603"></path>
                                    <path
                                        d="M373 845.3h-85.2c-45.2 0-81.96-36.77-81.96-81.96V298.28c0-45.2 36.77-81.96 81.96-81.96h53.31c0.72 0 1.36-0.4 1.67-1.04 4.31-8.91 9.49-19.34 13.08-26.52 3.91-7.82 11.77-12.68 20.52-12.68h225.21c8.75 0 16.61 4.86 20.52 12.69l13.27 26.54c0.32 0.63 0.95 1.03 1.66 1.03h53.37c45.2 0 81.96 36.77 81.96 81.96v319.72c0 5.52-4.48 10-10 10s-10-4.48-10-10V298.28c0-34.17-27.8-61.96-61.96-61.96h-53.37c-8.33 0-15.82-4.63-19.55-12.08l-13.27-26.54c-0.5-1-1.51-1.63-2.63-1.63H376.38c-1.12 0-2.13 0.62-2.63 1.63-3.56 7.13-8.7 17.47-12.97 26.29-3.62 7.49-11.35 12.34-19.67 12.34H287.8c-34.17 0-61.96 27.8-61.96 61.96v465.06c0 34.17 27.8 61.96 61.96 61.96H373c5.52 0 10 4.48 10 10s-4.48 10-10 10z"
                                        fill="#333333" p-id="1604"></path>
                                    <path
                                        d="M848.35 817.21l-5.14-100.25s-1.93-12.85-12.21-6.43c0 0-26.41 35.25-63.05 26.37 0 0-39.41-6.66-38.48-50.14 0 0 4.07-33.68-13.49-33.42 0 0-12.42-3.59-16.06 21.21 0 0-1.35 23.5-22.49 37.27 0 0-54.12 36.57-188.69 71.16 0 0-19.98 6.11-46.5 11.74 0 0-21.03 5.78-16.62 22.49 0 0 1.34 34.69 44.58 51.62 11.83 4.63 24.47 6.86 37.17 6.86h285.15s63.55 7.07 55.83-58.48z"
                                        fill="#FFD44A" p-id="1605"></path>
                                    <path
                                        d="M592.48 805.54c-2.32 0-4.64-0.8-6.53-2.43l-29.62-25.58c-4.18-3.61-4.64-9.92-1.03-14.1 3.61-4.18 9.92-4.64 14.1-1.03l29.62 25.58c4.18 3.61 4.64 9.92 1.03 14.1a9.98 9.98 0 0 1-7.57 3.46zM643.93 782.63c-2.32 0-4.64-0.8-6.53-2.43l-29.62-25.58c-4.18-3.61-4.64-9.92-1.03-14.1 3.61-4.18 9.92-4.64 14.1-1.03l29.62 25.58c4.18 3.61 4.64 9.92 1.03 14.1a9.98 9.98 0 0 1-7.57 3.46zM699.08 757.24c-2.32 0-4.64-0.8-6.53-2.43l-29.62-25.58c-4.18-3.61-4.64-9.92-1.03-14.1 3.61-4.18 9.92-4.64 14.1-1.03l29.62 25.58c4.18 3.61 4.64 9.92 1.03 14.1a9.98 9.98 0 0 1-7.57 3.46z"
                                        fill="#333333" p-id="1606"></path>
                                    <path
                                        d="M436 829s32.8 9.89 220.9 10.95c0 0 140.1-9.95 191.1-27.95 0 0 11.31 55.96-42.35 63.48l-298.29 0.2S448 874 436 829z"
                                        fill="#FC981C" p-id="1607"></path>
                                    <path
                                        d="M797.68 885.9c-2.69 0-4.66-0.13-5.63-0.22H507.36c-14.3 0-28.03-2.54-40.81-7.54-44.67-17.48-50.18-52.31-50.85-59.35-2.38-10.42 1.44-20.25 10.56-27.09 6.05-4.54 12.59-6.43 13.32-6.63 0.19-0.05 0.38-0.1 0.57-0.14 25.73-5.46 45.46-11.46 45.66-11.52l0.43-0.12c130.78-33.61 185.06-69.41 185.6-69.77 0.04-0.03 0.09-0.06 0.13-0.08 16.44-10.71 17.92-28.77 17.97-29.53 0.02-0.3 0.04-0.52 0.09-0.81 1.93-13.14 6.55-22.14 13.72-26.75 4.69-3.02 9.66-3.55 13.28-2.98 5.78 0.21 10.84 2.56 14.7 6.85 9.9 10.99 8.33 31.86 7.74 37.21-0.2 14.08 4.59 24.92 14.24 32.22 7.73 5.85 15.9 7.39 15.98 7.41 0.23 0.04 0.4 0.08 0.63 0.13 12.15 2.95 24.53 0.23 36.78-8.06 9.84-6.66 15.87-14.53 15.93-14.61 0.73-0.97 1.66-1.82 2.68-2.46 7.8-4.88 13.98-3.29 16.97-1.92 8.31 3.83 10.15 13.45 10.43 15.34 0.05 0.32 0.08 0.65 0.1 0.97l5.12 99.92c2.6 22.71-2.26 40.44-14.46 52.72-14.7 14.79-35.77 16.81-46.19 16.81z m-352.97-81.49c-0.78 0.25-4.04 1.38-6.72 3.5-3.43 2.7-3.22 4.81-2.71 6.74 0.2 0.77 0.31 1.37 0.32 2.17 0.06 1.07 2.08 28.54 38.24 42.7 10.45 4.09 21.73 6.17 33.52 6.17h285.15c0.37 0 0.74 0.02 1.11 0.06 0.2 0.02 23.23 2.25 36.13-10.82 7.69-7.79 10.61-20.09 8.67-36.55-0.03-0.22-0.04-0.44-0.06-0.66l-4.86-94.86c-10.54 10.97-35.33 31.5-67.61 23.83-2.41-0.46-12.89-2.8-23.42-10.47-10.81-7.88-23.57-22.9-23-49.67 0-0.33 0.03-0.66 0.07-0.98 1.17-9.94-0.65-20.93-2.9-22.17s-0.14-0.05-0.51-0.05c-0.55 0.01-1.11-0.03-1.65-0.11-0.65 0.52-3.19 3.09-4.62 12.46-0.37 4.2-3.54 29.2-26.91 44.46-3.18 2.14-58.17 38.16-191.52 72.45-2.38 0.72-21.47 6.42-46.72 11.8z m268.58-141.44z m-0.09-0.03s0.06 0.02 0.08 0.02c-0.03 0-0.05-0.02-0.08-0.02z"
                                        fill="#333333" p-id="1608"></path>
                                    <path
                                        d="M520.58 849.95c-3.37 0-6.67 0-9.88-0.01-5.52-0.01-9.99-4.5-9.98-10.02 0.01-5.51 4.49-9.98 10-9.98h0.02c289.41 0.66 324.16-24.74 328.18-29.84 3.42-4.33 9.71-5.07 14.05-1.65 4.33 3.42 5.07 9.71 1.65 14.05-7.28 9.22-23.98 16.07-52.57 21.58-22.36 4.31-52.34 7.8-89.1 10.37-64 4.49-138.23 5.5-192.38 5.5z"
                                        fill="#333333" p-id="1609"></path>
                                </svg>{{ tourismIndexData[0]?.name }}:{{
                            tourismIndexData[0]?.level
                        }}级,{{
                                this.select_spot?.travelIndexList[0]?.content
                            }}</span>
                            <!-- 旅游指数 -->
                            <span><svg t="1724229657134" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="1774" width="64" height="64">
                                    <path
                                        d="M788.15 816.26H255.01c-49.14 0-88.98-39.84-88.98-88.98V475.71c0-49.14 39.84-88.98 88.98-88.98h155.68c155.29 0 301.1 74.66 391.87 200.65l0.26 0.37a276.537 276.537 0 0 1 52.17 161.66c0 36.92-29.93 66.85-66.85 66.85z"
                                        fill="#57B7F9" p-id="1775"></path>
                                    <path
                                        d="M506.75 396.43s0 88.27 87.97 163.08c74.13 63.04 230.31 59.19 230.31 59.19S700.77 413.67 506.75 396.42z"
                                        fill="#D4EFFF" p-id="1776"></path>
                                    <path
                                        d="M817.24 628.74h-0.06c-15.5-0.1-56.38-1.2-101.09-9.37-56.13-10.26-99.15-27.83-127.85-52.24-50.61-43.04-73-90.57-82.87-122.87-1.61-5.28 1.36-10.87 6.64-12.49 5.28-1.61 10.87 1.36 12.49 6.64 9.09 29.74 29.77 73.57 76.7 113.48 25.99 22.1 65.86 38.19 118.49 47.8 43.16 7.88 82.64 8.95 97.62 9.05 5.52 0.03 9.97 4.54 9.94 10.06-0.03 5.5-4.51 9.94-10 9.94z"
                                        fill="#333333" p-id="1777"></path>
                                    <path
                                        d="M384.59 618.75H177.34V501.3h104.04c42.46 0 82.33 20.42 107.15 54.87l0.07 0.1a75.653 75.653 0 0 1 14.27 44.2c0 10.09-8.18 18.28-18.28 18.28z"
                                        fill="#D4EFFF" p-id="1778"></path>
                                    <path
                                        d="M165.5 723.68h688.29s11.23 92.58-65.64 92.58H247.82s-82.32-20.45-82.32-92.58z"
                                        fill="#33A1F2" p-id="1779"></path>
                                    <path
                                        d="M788.15 826.26H255.01c-54.58 0-98.98-44.4-98.98-98.98v-30.54c0-5.52 4.48-10 10-10s10 4.48 10 10v30.54c0 43.55 35.43 78.98 78.98 78.98h533.14c31.34 0 56.85-25.5 56.85-56.85 0-56.27-17.39-110.15-50.28-155.81l-0.26-0.37c-43.62-60.54-101.77-110.51-168.19-144.52-66.41-34.01-140.96-51.98-215.57-51.98H255.01c-43.55 0-78.98 35.43-78.98 78.98v142.76c0 5.52-4.48 10-10 10s-10-4.48-10-10V475.71c0-54.58 44.4-98.98 98.98-98.98h155.68c77.77 0 155.46 18.73 224.69 54.18s129.84 87.53 175.3 150.63l0.26 0.37C846.3 630.99 865 688.92 865 749.41c0 42.37-34.47 76.85-76.85 76.85z"
                                        fill="#333333" p-id="1780"></path>
                                    <path
                                        d="M754.79 733.68H170.87c-5.52 0-10-4.48-10-10s4.48-10 10-10h583.92c5.52 0 10 4.48 10 10s-4.48 10-10 10z"
                                        fill="#333333" p-id="1781"></path>
                                    <path
                                        d="M638.22 278.13l120.21-93.43c1.6-1.25 3.66-1.8 5.68-1.57 14.18 1.57 26.44 1.95 41.48 5.19 2.43 0.52 3.51 3.38 2 5.35L717.5 310.78l-79.28-32.64z"
                                        fill="#A1DCFF" p-id="1782"></path>
                                    <path
                                        d="M717.5 311.77l62 27.6c2.06 0.94 4.45 0.84 6.43-0.27l65.04-36.36a9.275 9.275 0 0 1 7.6-0.66l16.74 5.87a7.736 7.736 0 0 1 3.33 12.31l-52.47 61.75c-15.4 18.36-48.05 9.04-48.05 9.04s-251.8-69.94-251.83-69.95c-45.45-13.7-51.3-23.32-51.3-37.31 0-18.65 37.31-23.32 37.31-23.32 8.61-4.28 27.72-14.13 54.54-4.93l71.38 23.58 79.28 32.64z"
                                        fill="#FFF6DB" p-id="1783"></path>
                                    <path
                                        d="M482 271.73L782 369s33.47 8 55.23 0c0 0-21.97 30.11-58.1 21.05l-281.54-79.28s-27.58-10.3-15.58-39.04z"
                                        fill="#33A1F2" p-id="1784"></path>
                                    <path
                                        d="M797.61 402.42h-0.27c-11.34-0.04-20.57-2.64-20.96-2.75q-251.74-69.93-251.79-69.94c-0.06-0.02-0.12-0.04-0.18-0.05C480.19 316.35 466 304.95 466 282.8c0-24.61 35.1-31.59 44.31-32.99 9.93-4.91 31.47-14.74 60.73-4.73l66.26 21.89 116-90.16c3.61-2.81 8.32-4.13 12.91-3.62 3.88 0.43 7.7 0.78 11.4 1.11 9.67 0.88 19.67 1.78 31.08 4.24 4.53 0.97 8.18 4.15 9.77 8.49 1.58 4.32 0.86 9.08-1.95 12.73l-64.75 84.18c-3.37 4.38-9.65 5.2-14.02 1.83-4.38-3.37-5.2-9.65-1.83-14.02l58.1-75.53c-6.17-0.9-12.08-1.44-18.2-1.99-3.53-0.32-7.18-0.65-10.96-1.06l-119.49 92.87a9.997 9.997 0 0 1-9.27 1.6l-71.38-23.58s-0.07-0.02-0.11-0.04c-22.45-7.7-38.05 0.05-46.43 4.22l-0.42 0.21c-1.01 0.5-2.09 0.83-3.21 0.97-13.19 1.69-28.55 7.91-28.55 13.4 0 6.75 0 14.4 44.08 27.7 5.88 1.63 251.72 69.92 251.72 69.92 0.31 0.09 26.88 7.08 37.71-5.83l50.37-59.29-13.32-4.67-64.75 36.2a17.182 17.182 0 0 1-15.44 0.65l-61.93-27.57c-5.05-2.25-7.32-8.16-5.07-13.2 2.25-5.05 8.16-7.31 13.2-5.07l60.74 27.04 63.78-35.66c4.82-2.7 10.58-3.19 15.79-1.37l16.74 5.87c2.06 0.72 3.94 1.8 5.6 3.21 7.46 6.33 8.37 17.54 2.05 25l-52.47 61.76c-8.18 9.75-21.05 14.93-37.18 14.93z m-13.08-73.2h0.03-0.03z"
                                        fill="#333333" p-id="1785"></path>
                                </svg>{{ tourismIndexData[1]?.name }}:{{
                            tourismIndexData[1]?.level
                        }}级,{{
                                tourismIndexData[1]?.content
                            }}</span>
                            <!-- 舒适指数 -->
                            <span><svg t="1724229671037" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="1952" width="64" height="64">
                                    <path
                                        d="M524.99 192.59l-23.72 41.08-23.69-41.03c-74.93 11.86-106.71 81.67-92.68 187.96 15.84 120.07 70.27 148.91 116.58 148.91s100.53-32.63 116.08-148.91c14.23-106.44-17.42-176.31-92.56-188.01z"
                                        fill="#F76C69" p-id="1953"></path>
                                    <path
                                        d="M183.26 395.87L215 431.12l-46.34 9.85c-11.87 74.93 44.69 126.72 150.12 146.23 119.09 22.04 163.34-20.82 177.65-64.85 14.64-45.05 0.03-105.69-105.75-156.41-96.83-46.43-173.07-37.92-207.41 29.93z"
                                        fill="#F76C69" p-id="1954"></path>
                                    <path
                                        d="M819.24 395.87l-31.74 35.25 46.34 9.85c11.87 74.93-44.69 126.72-150.12 146.23-119.09 22.04-163.34-20.82-177.65-64.85-14.64-45.05-0.03-105.69 105.75-156.41 3.46-1.66 6.9-3.25 10.31-4.77 91.92-40.98 163.99-30.72 197.11 34.7z"
                                        fill="#F76C69" p-id="1955"></path>
                                    <path
                                        d="M284.48 781.32l43.34-19.3-4.95 47.12c67.59 34.44 134.33-3.35 185.46-97.58 57.76-106.45 30.68-161.78-6.78-188.99-38.32-27.84-100.51-32.69-181.44 52.24-74.08 77.75-89.55 152.88-35.63 206.51z"
                                        fill="#F76C69" p-id="1956"></path>
                                    <path
                                        d="M679.9 809.32l-4.96-47.18 43.28 19.27c53.64-53.64 38.33-128.79-35.5-206.54-83.4-87.83-144.38-79.17-181.84-51.95-38.32 27.84-62.15 85.49-6.38 188.7 51.05 94.48 117.72 132.41 185.4 97.7z"
                                        fill="#F76C69" p-id="1957"></path>
                                    <path
                                        d="M692 346s-32.48 149.73-119.74 159.37c0 0 51.69-87.54 53.22-138.95 0 0 38.52-22.41 66.52-20.41zM731.91 646.01s-146.6 12.24-182.73-67.77c0 0 99.23 22.11 148.6 7.67 0 0 27.38 32.85 34.13 60.1zM463.51 778.97s-63.8-142.81 1.13-201.89c0 0 9.63 101.2 38.62 143.69 0 0-15.93 43.36-39.75 58.2zM250.06 565.34S364.05 457.2 440.31 500.7c0 0-93.27 40.44-124.73 81.14 0 0-44.05 1.58-65.52-16.49zM388.17 290.15s131.89 75.97 114.09 161.94c0 0-67.28-76.21-115.71-93.55 0 0-8.94-42.38 1.62-68.39z"
                                        fill="#E54E4E" p-id="1958"></path>
                                    <path
                                        d="M387.39 371.05c-5.15 0-9.53-3.96-9.96-9.19-3.76-46.14 1.55-84.65 15.79-114.47 14.97-31.35 39.06-51.93 71.59-61.17 12.75-3.62 26.26 1.82 32.85 13.23l16.87 29.21c2.76 4.78 1.12 10.9-3.66 13.66s-10.9 1.12-13.66-3.66l-16.87-29.21c-2-3.47-6.14-5.11-10.06-4-26.77 7.6-46.62 24.61-59.01 50.55-12.7 26.59-17.38 61.66-13.9 104.23 0.45 5.5-3.65 10.33-9.15 10.78-0.28 0.02-0.55 0.03-0.82 0.03zM576.05 508.66a9.97 9.97 0 0 1-6.82-2.69 10.001 10.001 0 0 1-0.5-14.13c22.05-23.65 36.68-61.52 43.51-112.57 6.8-50.82 2.69-93.65-11.86-123.87-14.4-29.9-38.73-47.71-72.33-52.94-5.46-0.85-9.19-5.96-8.34-11.42 0.85-5.46 5.96-9.19 11.42-8.34 79.42 12.36 116.21 84.98 100.94 199.22-7.39 55.24-23.77 96.81-48.71 123.55a9.985 9.985 0 0 1-7.32 3.18zM309.02 594.28c-0.72 0-1.45-0.08-2.19-0.24-46.68-10.41-82.94-27.37-107.78-50.4-26.13-24.23-38.66-54.03-37.25-88.58 0.53-12.99 9.87-23.97 22.71-26.7l33-7.01c5.4-1.15 10.71 2.3 11.86 7.7 1.15 5.4-2.3 10.71-7.7 11.86l-33 7.01c-3.9 0.83-6.73 4.1-6.89 7.96-1.17 28.43 9.22 53.02 30.86 73.09 22.21 20.6 55.36 35.92 98.53 45.55 5.39 1.2 8.79 6.55 7.58 11.94a10.006 10.006 0 0 1-9.75 7.83z"
                                        fill="#333333" p-id="1959"></path>
                                    <path
                                        d="M497.03 463.63c-3.79 0-7.41-2.16-9.09-5.83-14.19-30.91-46.82-58.78-96.99-82.84-46.23-22.17-88.24-31.5-121.47-27-32.88 4.46-57.34 22.1-72.7 52.43-2.49 4.93-8.51 6.9-13.44 4.41s-6.9-8.51-4.41-13.44c36.3-71.72 116.73-84.27 220.66-34.43 54.49 26.13 90.33 57.26 106.52 92.53 2.3 5.02 0.1 10.96-4.92 13.26-1.35 0.62-2.77 0.91-4.17 0.91zM629.17 603.15c-30.83 0-56.79-5.6-77.6-16.78-4.86-2.61-6.69-8.68-4.07-13.54 2.61-4.86 8.68-6.69 13.54-4.07 29.24 15.71 71.45 18.61 125.46 8.62 50.31-9.31 89.71-26.5 113.95-49.72 23.97-22.96 33.42-51.6 28.12-85.11-0.86-5.45 2.86-10.58 8.31-11.44 5.45-0.87 10.58 2.86 11.44 8.31 12.56 79.25-45.1 136.7-158.18 157.63-22.04 4.08-42.39 6.11-60.98 6.12zM792.1 441.13a9.98 9.98 0 0 1-6.69-2.57c-4.1-3.7-4.44-10.02-0.74-14.12l22.64-25.15c2.66-2.95 3.03-7.27 0.89-10.49-15.92-24.06-39.11-37.92-68.93-41.2-30.62-3.37-67.11 4.27-108.47 22.71-5.04 2.25-10.96-0.02-13.2-5.06-2.25-5.04 0.02-10.96 5.06-13.21 44.64-19.9 84.61-28.08 118.8-24.32 36 3.96 64.07 20.8 83.42 50.04 7.16 10.83 6.05 25.18-2.71 34.91l-22.64 25.15a9.978 9.978 0 0 1-7.43 3.31zM376.89 831.75c-13.12 0-26.33-2.45-39.57-7.37-12.18-4.52-19.74-16.79-18.36-29.85l3.53-33.55c0.58-5.49 5.5-9.48 10.99-8.9 5.49 0.58 9.48 5.5 8.9 10.99l-3.53 33.55c-0.42 3.96 1.82 7.67 5.43 9.01 26.52 9.84 52.97 7.65 78.6-6.5 26.3-14.52 51-40.94 73.42-78.53 2.83-4.74 8.97-6.29 13.71-3.47s6.29 8.97 3.47 13.71c-24.26 40.67-51.49 69.54-80.93 85.8-18.24 10.07-36.85 15.11-55.65 15.11zM289.09 791.32c-2.55 0-5.1-0.97-7.05-2.91-56.99-56.69-44.07-137.06 35.44-220.5 40.94-42.96 80.93-67.34 118.87-72.45 5.47-0.74 10.51 3.1 11.25 8.57 0.74 5.47-3.1 10.51-8.57 11.25-33.32 4.49-69.34 26.84-107.06 66.43-35.37 37.12-57.23 74.18-63.21 107.18-5.92 32.65 3.3 61.36 27.4 85.34 3.92 3.89 3.93 10.23 0.04 14.14a9.98 9.98 0 0 1-7.09 2.95z"
                                        fill="#333333" p-id="1960"></path>
                                    <path
                                        d="M718.05 787.5c-3.95 0-7.95-0.82-11.76-2.51l-30.82-13.72c-5.05-2.25-7.31-8.16-5.07-13.2s8.16-7.31 13.2-5.07l30.82 13.72c3.64 1.62 7.85 0.64 10.24-2.38 17.53-22.16 23.63-47.96 18.12-76.67-5.65-29.46-23.09-61.07-51.83-93.98-3.63-4.16-3.21-10.48 0.95-14.11 4.16-3.63 10.48-3.21 14.11 0.95 31.1 35.61 50.08 70.38 56.41 103.37 6.65 34.69-0.77 65.93-22.08 92.85-5.51 6.96-13.79 10.75-22.3 10.75zM587.86 820.12c-1.53 0-3.09-0.35-4.55-1.1-34.43-17.61-65.72-52.15-93-102.65-27.78-51.41-38.7-96.41-32.47-133.74 0.91-5.45 6.06-9.13 11.51-8.22 5.45 0.91 9.13 6.06 8.22 11.51-5.48 32.84 4.73 73.53 30.34 120.94 24.97 46.21 54.19 78.84 84.51 94.35a10.005 10.005 0 1 1-4.56 18.91z"
                                        fill="#333333" p-id="1961"></path>
                                    <path
                                        d="M509.03 524.05m-70.43 0a70.43 70.43 0 1 0 140.86 0 70.43 70.43 0 1 0-140.86 0Z"
                                        fill="#FEDC5A" p-id="1962"></path>
                                    <path
                                        d="M509.03 604.48c-44.35 0-80.43-36.08-80.43-80.43s36.08-80.43 80.43-80.43 80.43 36.08 80.43 80.43-36.08 80.43-80.43 80.43z m0-140.86c-33.32 0-60.43 27.11-60.43 60.43s27.11 60.43 60.43 60.43 60.43-27.11 60.43-60.43-27.11-60.43-60.43-60.43z"
                                        fill="#333333" p-id="1963"></path>
                                    <path
                                        d="M641.63 802.92c-22.04-44.43-22.37-126.65 48.96-165.48 30.11-16.27 60.57-19.5 97.42-32.21 26.58-9.32 42.23-27.97 48.62-37.3 0.89-1.5 2.83-1.98 4.33-1.09 0.67 0.4 1.16 1.03 1.39 1.77 11.76 32.03 59.03 180.38-39.23 251.59-43.17 31.26-96.2 26.87-125.56 15.43-22.31-10.66-35.94-32.71-35.94-32.71z"
                                        fill="#54D533" p-id="1964"></path>
                                    <path
                                        d="M805.16 609.46S698 639 672 702c0 0-21 46-4 123 0 0-49.8-19.53-39.4-102.76 0 0 23.71-110.32 176.56-112.78z"
                                        fill="#54B721" p-id="1965"></path>
                                    <path
                                        d="M726.46 854.22c-9.56 0-17.92-0.87-24.5-1.9-5.46-0.85-9.19-5.97-8.33-11.43 0.85-5.46 5.97-9.19 11.43-8.33 19.63 3.08 57.72 4.51 92.22-20.46 83.88-60.78 54.01-183.97 39.69-228.43-9.01 10.16-24.03 23.41-45.63 30.99-14.1 4.87-27.03 8.31-39.53 11.64-20.7 5.51-38.58 10.28-56.45 19.93-35.21 19.17-49.23 47.74-54.79 68.33-7.74 28.7-4.07 60.53 9.59 83.1 0.38 0.59 6.68 10.4 17.1 19.26a10 10 0 0 1 1.14 14.1 10 10 0 0 1-14.1 1.14c-13.2-11.22-20.84-23.47-21.16-23.99-16.47-27.16-21.01-65-11.88-98.82 6.57-24.36 23.11-58.14 64.57-80.7 19.97-10.79 39.82-16.08 60.83-21.68 12.16-3.24 24.73-6.59 38.11-11.2 24.37-8.55 38.48-26.03 43.52-33.33 1.81-2.83 4.59-4.83 7.86-5.65 3.41-0.86 6.95-0.34 9.96 1.46 2.69 1.61 4.71 4.11 5.71 7.07 6.38 17.41 21.17 63.04 22.2 114.19 0.59 29.47-3.54 56.18-12.28 79.36-10.73 28.49-28.47 51.84-52.72 69.42-28.62 20.72-59.14 25.92-82.55 25.92z m118.77-281.16z"
                                        fill="#333333" p-id="1966"></path>
                                    <path
                                        d="M614.87 860.21c-4.17 0-8.05-2.62-9.47-6.79-1.78-5.23 1.02-10.91 6.25-12.69 65.47-22.24 111.19-69.86 138.02-105.89 29.37-39.46 43.21-74.1 43.34-74.44 2.03-5.13 7.83-7.66 12.97-5.64 5.14 2.02 7.66 7.82 5.64 12.96-0.59 1.49-14.73 37.05-45.55 78.57-28.56 38.49-77.43 89.41-147.99 113.38-1.07 0.36-2.15 0.53-3.22 0.53z"
                                        fill="#333333" p-id="1967"></path>
                                </svg>{{ tourismIndexData[2]?.name }}:{{
                            tourismIndexData[2]?.level
                        }}级,{{
                                tourismIndexData[2]?.content
                            }}</span>
                            <!-- 雨具指数 -->
                            <span><svg t="1724229888658" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="7997" width="64" height="64">
                                    <path d="M0 0h1024v1024H0V0z" fill="#202425" opacity=".01" p-id="7998"></path>
                                    <path
                                        d="M921.6 614.4c37.717333 0 68.7104-30.685867 64.034133-68.096a541.115733 541.115733 0 0 0-32.1536-127.829333A515.857067 515.857067 0 0 0 849.92 252.347733a477.115733 477.115733 0 0 0-154.999467-110.967466A450.389333 450.389333 0 0 0 512 102.4c-62.737067 0-124.893867 13.243733-182.8864 38.980267a477.115733 477.115733 0 0 0-154.999467 110.967466 515.8912 515.8912 0 0 0-103.594666 166.126934 541.218133 541.218133 0 0 0-32.1536 127.829333C33.6896 583.714133 64.682667 614.4 102.4 614.4h819.2z"
                                        fill="#FFAA44" p-id="7999"></path>
                                    <path
                                        d="M563.2 68.266667a51.2 51.2 0 0 0-102.4 0v41.301333c-22.698667 6.382933-44.987733 17.066667-66.3552 31.812267-37.2736 25.736533-71.133867 63.453867-99.669333 110.967466-28.535467 47.547733-51.165867 104.004267-66.56 166.126934a796.535467 796.535467 0 0 0-20.6848 127.726933C204.4928 583.7824 235.349333 614.4 273.066667 614.4h187.733333v238.933333a51.2 51.2 0 0 1-102.4 0v-34.133333a51.2 51.2 0 0 0-102.4 0v34.133333a153.6 153.6 0 1 0 307.2 0v-238.933333H750.933333c37.717333 0 68.573867-30.6176 65.536-68.1984a796.023467 796.023467 0 0 0-20.650666-127.726933c-15.428267-62.122667-38.058667-118.5792-66.594134-166.126934-28.535467-47.5136-62.395733-85.230933-99.669333-110.967466A223.778133 223.778133 0 0 0 563.2 109.568V68.266667z"
                                        fill="#FF7744" p-id="8000"></path>
                                </svg>{{ tourismIndexData[3]?.name }}:{{
                            tourismIndexData[3]?.level
                        }}级,{{
                                tourismIndexData[3]?.content
                            }}</span>
                            <!-- 运动指数 -->
                            <span><svg t="1724229687763" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="2134" width="64" height="64">
                                    <path
                                        d="M856 509.85c0 236.75-62.04 300.07-298.79 300.07S259.7 746.6 259.7 509.85s60.76-298.79 297.51-298.79S856 273.1 856 509.85z"
                                        fill="#FEC773" p-id="2135"></path>
                                    <path
                                        d="M303.45 509.85c0-229.28 56.99-294.71 275.64-298.6-7.12-0.13-14.41-0.19-21.88-0.19-236.75 0-297.51 62.04-297.51 298.79s60.76 300.07 297.51 300.07c7.47 0 14.76-0.06 21.88-0.19-218.65-3.97-275.64-70.59-275.64-299.88z"
                                        fill="#F29816" p-id="2136"></path>
                                    <path
                                        d="M557.21 819.92c-5.52 0-10-4.48-10-10s4.48-10 10-10c61.52 0 107.34-4.23 144.17-13.3 37.62-9.27 66.05-23.99 86.91-45 20.84-20.99 35.43-49.57 44.6-87.36C841.84 617.38 846 571.5 846 509.85s-4.17-107.44-13.11-144.2c-9.16-37.64-23.74-66.07-44.58-86.91-20.84-20.84-49.26-35.42-86.91-44.58-36.76-8.94-82.58-13.11-144.2-13.11-52.41 0-94.2 3.13-127.75 9.58-34.96 6.72-62.34 17.24-83.72 32.17-41.9 29.25-64.2 78.44-72.29 159.47-0.55 5.5-5.44 9.5-10.94 8.96-5.5-0.55-9.51-5.45-8.96-10.94 8.72-87.36 33.63-140.98 80.74-173.88 45.53-31.79 112.2-45.35 222.92-45.35 242.42 0 308.79 66.38 308.79 308.79 0 63.27-4.35 110.66-13.68 149.12-10.05 41.44-26.36 73.09-49.84 96.74-23.52 23.69-55.03 40.15-96.32 50.32-38.45 9.47-85.78 13.88-148.96 13.88z"
                                        fill="#333333" p-id="2137"></path>
                                    <path
                                        d="M208.71 808.8c-5.39-7.23-4.41-17.37 2.25-23.44l129.38-117.79c15.18-13.82 38.97-11.53 51.24 4.93 12.27 16.46 7.66 39.92-9.92 50.51l-149.85 90.33c-7.72 4.66-17.72 2.69-23.11-4.54z"
                                        fill="#FE4933" p-id="2138"></path>
                                    <path
                                        d="M410.64 832.01c4.9 6.56 13.84 8.58 21.08 4.76l142.14-75.09c24.98-13.2 30.71-46.46 11.58-67.25l-54.2-58.93c-5.22-5.67-5.7-14.24-1.16-20.47l29.96-41.05c4.93-6.76 14.45-8.18 21.14-3.16l44.89 33.67c8.82 6.62 20.21 8.8 30.85 5.93l95.83-25.91c8.79-2.38 14.4-10.96 13.05-19.96-1.35-8.95-9.16-15.5-18.21-15.25l-79.85 2.18c-4.43 0.12-8.75-1.4-12.13-4.27l-43.01-36.49a88.186 88.186 0 0 1-12.83-13.44l-47.16-61.15a45.463 45.463 0 0 0-17.37-13.71l-63.95-28.71a59.083 59.083 0 0 0-35.79-4.04l-111.3 22.26c-8.51 1.7-14.3 9.64-13.32 18.26 0.96 8.44 8.1 14.82 16.6 14.82h109.57c3.76 0 7.47 0.9 10.81 2.62l35.37 18.24c8.99 4.64 11.89 16.11 6.19 24.46l-58.64 85.85c-17.88 26.19-14.3 61.45 8.49 83.5l62.85 60.81c6.66 6.44 5.99 17.3-1.41 22.88l-86.76 65.43c-7.3 5.51-8.78 15.88-3.31 23.21z"
                                        fill="#FE4933" p-id="2139"></path>
                                    <path d="M663.42 402m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#FE4933"
                                        p-id="2140"></path>
                                    <path
                                        d="M239.97 585.67m21.5 0l64.5 0q21.5 0 21.5 21.5l0 0q0 21.5-21.5 21.5l-64.5 0q-21.5 0-21.5-21.5l0 0q0-21.5 21.5-21.5Z"
                                        fill="#FE4933" p-id="2141"></path>
                                    <path
                                        d="M165.48 483m30.5 0l123.32 0q30.5 0 30.5 30.5l0 0q0 30.5-30.5 30.5l-123.32 0q-30.5 0-30.5-30.5l0 0q0-30.5 30.5-30.5Z"
                                        fill="#FE4933" p-id="2142"></path>
                                    <path
                                        d="M222.73 825.89c-8.42 0-16.66-3.88-22.05-11.11a27.439 27.439 0 0 1 3.54-36.81L333.6 660.18c9.32-8.48 21.86-12.66 34.4-11.45 12.54 1.21 24.06 7.69 31.59 17.8s10.46 22.99 8.03 35.36a44.821 44.821 0 0 1-20.81 29.7l-149.85 90.33a27.504 27.504 0 0 1-14.24 3.98z m140.91-157.37c-6.15 0-11.96 2.25-16.57 6.45L217.69 792.76a7.51 7.51 0 0 0-0.97 10.07 7.51 7.51 0 0 0 9.93 1.95l149.85-90.33c6.06-3.65 10.14-9.48 11.5-16.42 1.36-6.94-0.21-13.88-4.44-19.55s-10.43-9.17-17.47-9.84c-0.82-0.08-1.64-0.12-2.45-0.12z"
                                        fill="#333333" p-id="2143"></path>
                                    <path
                                        d="M423.91 848.72c-8.15 0-16.08-3.77-21.28-10.74-8.73-11.71-6.35-28.38 5.31-37.17l86.76-65.43a4.991 4.991 0 0 0 2.01-3.74c0.05-0.87-0.07-2.55-1.54-3.96l-62.85-60.81a74.936 74.936 0 0 1-9.8-96.33l58.64-85.85a6.741 6.741 0 0 0 0.98-5.53c-0.28-1.12-1.11-3.17-3.5-4.4l-35.37-18.24c-1.92-0.99-4.07-1.51-6.23-1.51H327.47c-13.59 0-25-10.19-26.53-23.7-1.57-13.9 7.58-26.45 21.29-29.19l111.3-22.26c14.18-2.84 28.65-1.2 41.84 4.72l63.95 28.71a55.618 55.618 0 0 1 21.2 16.72l47.16 61.15c3.36 4.35 7.18 8.36 11.38 11.92l43.01 36.49a8.033 8.033 0 0 0 5.39 1.9l79.85-2.18c14.07-0.4 26.28 9.83 28.37 23.76 2.11 14.03-6.63 27.4-20.32 31.1l-95.83 25.91c-13.71 3.71-28.1 0.95-39.46-7.58l-44.89-33.67a5.044 5.044 0 0 0-3.75-0.95c-0.77 0.12-2.24 0.53-3.31 2.01l-29.96 41.05a6.17 6.17 0 0 0 0.44 7.8l54.2 58.93c11.23 12.21 16.06 28.59 13.24 44.94-2.82 16.35-12.84 30.17-27.51 37.92L436.39 845.6c-3.99 2.1-8.27 3.12-12.49 3.12z m-5.25-22.7a6.594 6.594 0 0 0 8.4 1.9l142.14-75.09c9.14-4.83 15.39-13.44 17.15-23.63 1.75-10.19-1.25-20.4-8.25-28.01l-54.2-58.93c-8.42-9.15-9.21-23.08-1.88-33.13l29.96-41.05c3.98-5.45 9.84-9 16.51-10 6.67-1 13.32 0.68 18.71 4.73l44.89 33.67c6.41 4.8 14.51 6.36 22.24 4.27l95.83-25.91a7.92 7.92 0 0 0 5.77-8.82c-0.59-3.95-4.06-6.83-8.05-6.74l-79.85 2.18c-6.91 0.2-13.61-2.17-18.88-6.64l-43.01-36.49a99.09 99.09 0 0 1-14.28-14.96l-47.16-61.15a35.484 35.484 0 0 0-13.55-10.69l-63.95-28.71c-9.37-4.21-19.65-5.37-29.73-3.35l-111.3 22.26a6.66 6.66 0 0 0-5.34 7.33 6.7 6.7 0 0 0 6.66 5.95h109.57c5.33 0 10.66 1.29 15.4 3.74l35.37 18.24a26.873 26.873 0 0 1 13.72 17.27c1.89 7.45 0.48 15.37-3.86 21.72l-58.64 85.85a54.969 54.969 0 0 0 7.19 70.67l62.85 60.81c5.28 5.1 8.04 12.24 7.59 19.56s-4.07 14.07-9.93 18.49l-86.76 65.43c-2.9 2.19-3.49 6.33-1.32 9.25z"
                                        fill="#333333" p-id="2144"></path>
                                    <path
                                        d="M663.42 476.01c-40.81 0-74-33.2-74-74s33.2-74 74-74 74 33.2 74 74-33.2 74-74 74z m0-128.01c-29.78 0-54 24.23-54 54s24.23 54 54 54 54-24.23 54-54-24.23-54-54-54zM325.97 638.67h-64.5c-17.37 0-31.5-14.13-31.5-31.5s14.13-31.5 31.5-31.5h64.5c17.37 0 31.5 14.13 31.5 31.5s-14.13 31.5-31.5 31.5z m-64.5-43c-6.34 0-11.5 5.16-11.5 11.5s5.16 11.5 11.5 11.5h64.5c6.34 0 11.5-5.16 11.5-11.5s-5.16-11.5-11.5-11.5h-64.5zM319.31 554H195.98c-22.33 0-40.5-18.17-40.5-40.5s18.17-40.5 40.5-40.5h123.33c22.33 0 40.5 18.17 40.5 40.5s-18.17 40.5-40.5 40.5z m-123.33-61c-11.3 0-20.5 9.2-20.5 20.5s9.2 20.5 20.5 20.5h123.33c11.3 0 20.5-9.2 20.5-20.5s-9.2-20.5-20.5-20.5H195.98z"
                                        fill="#333333" p-id="2145"></path>
                                </svg>{{ tourismIndexData[4]?.name }}:{{
                            tourismIndexData[4]?.level
                        }}级,{{
                                tourismIndexData[4]?.content
                            }}</span>
                        </div>
                    </div>

                </div>

            </div>
            <div class="center">
                <!-- 搜索 -->
                <div class="search">
                    <!-- 区县 -->
                    <el-select placeholder="县(区)" v-model="area" @change='areaChange'>
                        <el-option v-for="item in areaOptions" :key="item.value" :label="item.value"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    <!-- 景区名称 -->
                    <el-select slot="prepend" placeholder="景区名称" style="margin: 0 20px;" v-model="spot"
                        @change='spotChange'>
                        <el-option v-for="item in spotOptions" :key="item.scenicName" :label="item.scenicName"
                            :value="item.scenicName">
                        </el-option>
                    </el-select>
                    <!-- 搜索 -->
                    <el-input placeholder="请输入关键词" class="input-with-select" v-model="search">
                        <el-button slot="append" icon="el-icon-search"
                            style="color:#208fa1;background-color:transparent" @click="searchSpot"></el-button>
                    </el-input>
                </div>
                <!-- 地图 -->
                <div class="map">
                    <div id="map" ref="map">
                        <div class="level">
                            <svg style="margin-right: 10px;" t="1723874642703" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5234" width="128" height="128">
                                <path
                                    d="M750.545455 337.431273a110.592 110.592 0 0 0 110.545454-110.545455 110.592 110.592 0 0 0-110.545454-110.545454 110.615273 110.615273 0 0 0-110.545455 110.545454 110.126545 110.126545 0 0 0 110.545455 110.545455z"
                                    fill="#DCE028" p-id="5235"></path>
                                <path
                                    d="M186.042182 814.545455m46.545454 0l558.545455 0q46.545455 0 46.545454 46.545454l0 0q0 46.545455-46.545454 46.545455l-558.545455 0q-46.545455 0-46.545454-46.545455l0 0q0-46.545455 46.545454-46.545454Z"
                                    fill="#29CC7E" opacity=".8" p-id="5236"></path>
                                <path
                                    d="M630.295273 442.949818l-103.493818 179.2a93.090909 93.090909 0 0 0 80.616727 139.636364h206.987636a93.090909 93.090909 0 0 0 80.616727-139.636364l-103.493818-179.2a93.090909 93.090909 0 0 0-161.233454 0z"
                                    fill="#66CC99" opacity=".8" p-id="5237"></path>
                                <path
                                    d="M318.836364 293.376l-189.858909 328.843636a93.090909 93.090909 0 0 0 80.616727 139.636364h379.717818a93.090909 93.090909 0 0 0 80.616727-139.636364l-189.858909-328.843636a93.090909 93.090909 0 0 0-161.233454 0z"
                                    fill="#29CC7E" opacity=".8" p-id="5238"></path>
                            </svg>
                            <span @click="changeLevel('5A')" :class="spot_level === '5A' ? 'active' : ''">5A级</span>
                            <span @click="changeLevel('4A')" :class="spot_level === '4A' ? 'active' : ''">4A级</span>
                            <span @click="changeLevel('3A')" :class="spot_level === '3A' ? 'active' : ''">3A级</span>
                            <span @click="changeLevel('other')"
                                :class="spot_level === 'other' ? 'active' : ''">其他景区</span>

                        </div>
                        <div class="type">
                            <span @click="changeType('yl')" :class="img_type.includes('yl') ? 'active' : ''">
                                <img src="@/assets/travel/rain-active.svg" alt="" v-if="img_type.includes('yl')">
                                <img src="@/assets/travel/rain.svg" alt="" v-else>

                                雨量
                                <div class="type_rain" v-show="img_type.includes('yl')">
                                    <span @click.stop="changeType('yl-min')"
                                        :class="img_type === 'yl-min' ? 'active' : ''">分钟雨量</span>
                                    <span @click.stop="changeType('yl-1')"
                                        :class="img_type === 'yl-1' ? 'active' : ''">1小时雨量</span>
                                    <span @click.stop="changeType('yl-12')"
                                        :class="img_type === 'yl-12' ? 'active' : ''">12小时雨量</span>
                                    <span @click.stop="changeType('yl-24')"
                                        :class="img_type === 'yl-24' ? 'active' : ''">24小时雨量</span>
                                </div>
                            </span>

                            <span @click="changeType('qw')" :class="img_type === 'qw' ? 'active' : ''">
                                <img src="@/assets/travel/qw-active.svg" alt="" v-if="img_type.includes('qw')">
                                <img src="@/assets/travel/qw.svg" alt="" v-else>
                                气温
                                <div class="type_temp" v-show="img_type.includes('qw')">
                                    <span @click.stop="changeType('qw-ss')"
                                        :class="img_type === 'qw-ss' ? 'active' : ''">实时气温</span>
                                    <span @click.stop="changeType('qw-rg')"
                                        :class="img_type === 'qw-rg' ? 'active' : ''">日最高气温</span>
                                    <span @click.stop="changeType('qw-rd')"
                                        :class="img_type === 'qw-rd' ? 'active' : ''">日最低气温</span>
                                    <span @click.stop="changeType('qw-24')"
                                        :class="img_type === 'qw-24' ? 'active' : ''">24小时变温</span>
                                </div>
                            </span>
                            <span @click="changeType('qxyj')" :class="img_type === 'qxyj' ? 'active' : ''">
                                <img src="@/assets/travel/qxyj-active.svg" alt="" v-if="img_type === 'qxyj'">
                                <img src="@/assets/travel/qxyj.svg" alt="" v-else>
                                气象预警</span>
                            <span @click="changeType('yjxh')" :class="img_type === 'yjxh' ? 'active' : ''">
                                <img src="@/assets/travel/yjxh-active.svg" alt="" v-if="img_type === 'yjxh'">
                                <img src="@/assets/travel/yjxh.svg" alt="" v-else>
                                预警信号</span>
                            <span @click="changeType('tqld')" :class="img_type === 'tqld' ? 'active' : ''">
                                <img src="@/assets/travel/tqld-active.svg" alt="" v-if="img_type === 'tqld'">
                                <img src="@/assets/travel/tqld.svg" alt="" v-else>
                                天气雷达</span>
                            <span @click="changeType('qxjg')" :class="img_type === 'qxjg' ? 'active' : ''">
                                <img src="@/assets/travel/qxjg-active.svg" alt="" v-if="img_type.includes('qxjg')">
                                <img src="@/assets/travel/qxjg.svg" alt="" v-else>
                                气象景观
                                <div class="type_land" v-show="img_type.includes('qxjg')">
                                    <span @click.stop="changeType('qxjg-rc')"
                                        :class="img_type === 'qxjg-rc' ? 'active' : ''">日出</span>
                                    <span @click.stop="changeType('qxjg-rl')"
                                        :class="img_type === 'qxjg-rl' ? 'active' : ''">日落</span>
                                    <span @click.stop="changeType('qxjg-yh')"
                                        :class="img_type === 'qxjg-yh' ? 'active' : ''">云海</span>
                                    <span @click.stop="changeType('qxjg-xk')"
                                        :class="img_type === 'qxjg-xk' ? 'active' : ''">星空</span>
                                </div>
                            </span>

                        </div>
                        <!-- <div id="popup" class="ol-popup">
                <a href="#" id="popup-closer" class="ol-popup-closer"></a>
                <div id="popup-content">
                    <div>

                        <span>{{ clickArea }}</span>
                        <br>
                        <span>当前人数:5647</span>
                    </div>

                </div>
            </div> -->
                    </div>
                </div>
            </div>

            <div class="right">
                <!-- 景区简介 -->
                <div class="introduction">
                    <div class="title">
                        <span>景区简介</span><span class="spot_title">{{ select_spot?.scenicName }}</span>
                    </div>

                    <div class="content">

                        <el-image class="img" :src="spot_introduction?.url" fit="fill"></el-image>
                        <div class="text">
                            <!-- <p style="font-size:20px;color:white">{{ select_spot?.scenicName }}</p> -->
                            <span>
                                &ensp;&ensp;&ensp;&ensp;{{ spot_introduction?.content }}
                            </span>
                            <span @click="visible = !visible" class="more">more</span>

                        </div>

                    </div>

                    <el-dialog :title='select_spot?.scenicName' :visible.sync="visible" width="800px">
                        <div class="intropopup">

                            <el-image class="img" :src="spot_introduction?.url" fit="fill"></el-image>
                            <div class="text">
                                <!-- <p style="font-size:20px;color:white">{{ select_spot?.scenicName }}</p> -->
                                <span>
                                    &ensp;&ensp;&ensp;&ensp;{{ spot_introduction?.content }}
                                </span>


                            </div>
                        </div>


                    </el-dialog>


                </div>
                <!-- 精细化预报 -->
                <div class="refinedForecast">

                    <div class="title">


                        <span>精细化预报</span><span class="spot_title">{{ select_spot?.scenicName }}</span>
                        <div>
                            <el-select placeholder="24小时预报" v-model="forecast" style="width: 120px;height:40px"
                                size="small" @change="getweatherForecast(select_spot.town)">
                                <el-option v-for="item in forecastOptions" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="content">

                        <div id="refinedContent">

                        </div>
                    </div>


                </div>
                <!-- 气象景观预报 -->
                <div class="landscapeForecast">
                    <div class="title">
                        <span>气象景观预报</span><span class="spot_title">{{ select_spot?.scenicName }}</span>
                        <div>
                            <el-select placeholder="日出" v-model="landscape" style="width: 100px;height:40px"
                                size="small" @change="initBox3Chart(landscape)">
                                <el-option v-for="item in landscapeOptions" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                    </div>

                    <div class="content">
                        <div id="landscapeChart">

                        </div>

                    </div>

                </div>

            </div>
        </div>

    </div>
</template>

<script>
import axios from "axios";
import * as echarts from 'echarts';
import Charts from '@jiaminghi/charts'
// 雅安地图边界
import yaan from './yaan.json'

import rainData from './rain.json';
import heatData from './heatmap.json'

import "ol/ol.css";

import { fromLonLat } from "ol/proj";

import XYZ from 'ol/source/XYZ';
import TileLayer from "ol/layer/Tile";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import { Map, View, Feature } from "ol";
import { Style, Stroke, Fill, Text, Icon, Circle } from "ol/style";
import { Polygon, MultiPolygon, Point } from "ol/geom";
import { getTransform } from 'ol/proj';
import { defaults } from "ol/control";
import { Vector } from 'ol/source.js'
import OlGeomPoint from 'ol/geom/Point'
import OlStyleStyle from 'ol/style/Style'
import OlStyleIcon from 'ol/style/Icon'
import Vectors from 'ol/layer/Vector.js'
import Overlay from 'ol/Overlay.js'
import ImageLayer from 'ol/layer/Image';
import ImageStatic from 'ol/source/ImageStatic';

import Projection from 'ol/proj/Projection'; // 导入 Projection 类  
// 处理时间格式
import moment from 'moment';
// flv处理监控
import flvjs from "flv.js";

import {
    reqRainLayer,
    reqTempLayer,
    reqWeatherCondition,
    req24Forecast,
    req7Forecast,
    reqRadarEcho,
    reqAllSpots,
    reqSearchSpots,
    reqLandscape,
    reqIntroduction,
    reqWarningList,
    reqLandscape24,
    reqTourismIndex,
    reqMonitor
} from '@/api/travel/home.js'


export default {
    name: 'home',
    data() {
        return {
            // 1.天气实况
            WeatherCondition: null,
            // 2.景区实景
            // 监控地址
            monitor_url: '',
            player: null,
            errorListener: null,
            mediaInfoListener: null,
            currentUrl: null,
            errorCount: 0, // 记录错误次数  
            maxErrors: 5,  // 最大错误次数，达到后不再尝试播放  
            lastErrorTimestamp: 0, // 上次错误输出的时间  
            errorThrottleInterval: 3000, // 错误输出的时间间隔（毫秒） 
            // 3.旅游指数
            tourismIndexData: [],
            // 4.搜索
            // 地区
            area: '雅安',
            // 地区选择器
            areaOptions: [
                {
                    value: '雅安',
                },
                {
                    value: '雨城'
                },
                {
                    value: '经开'
                },
                {
                    value: '名山'
                },
                {
                    value: '天全'
                },
                {
                    value: '芦山'
                },
                {
                    value: '宝兴'
                },
                {
                    value: '荥经'
                },
                {
                    value: '汉源'
                }, {
                    value: '石棉'
                },],
            // 景区
            spot: '碧峰峡',
            // 景区选择器
            spotOptions: [],
            //搜索功能选中的景区
            search_spot: null,
            // 选中的景区id
            select_spot_id: '',
            //选中的景区
            select_spot: null,
            // 搜索框内容
            search: '',
            // 5.地图
            map: null,
            // 当前图层
            currentLayer: null,
            // 点
            currentPoints: null,
            // 框的图层
            overlays: [],
            // 叠加图层
            areaLayer: null,
            // 处理成透明背景后的图片
            resultImage: null,
            // 雨量分布图
            rainLayer: null,
            //雨量框
            rainLabelOverlays: [],
            // 景区降雨数据
            spots_rain_station: [],
            // 气温分布图
            tempLayer: null,
            // 景区气温数据
            spots_temp_station: [],
            // 图层类型
            img_type: '',
            // 图层数据
            layerData: [],
            // 景区等级
            spot_level: '',
            // 景区数据
            spot_data: [],
            spot_5A_data: [],
            spot_4A_data: [],
            spot_3A_data: [],
            spot_other_data: [],
            // 景点图层
            spot_all_layer: null,
            spot_5A_layer: null,
            spot_4A_layer: null,
            spot_3A_layer: null,
            spot_other_layer: null,
            // 点击的风景区
            clickArea: '',

            // 6.景区简介
            spot_introduction: null,
            // 弹出框
            visible: false,

            //7.精细化预报
            forecast: '24',
            // 精细化预报选择器
            forecastOptions: [
                {
                    value: '24',
                    label: '24小时预报'
                },
                {
                    value: '7',
                    label: '7天预报'
                },

            ],

            // 8.气象景观
            landscape: '',
            // 气象景观选择器
            landscapeOptions: [
                {
                    value: '日出',
                },
                {
                    value: '日落'
                },
                {
                    value: '云海'
                },
                {
                    value: '星空'
                }
            ],
            // 气象景观数据
            landscapeData: [],
            // 气象景观24小时预报数据
            landscape24Data: []




        }
    },
    mounted() {
        this.initMap();
        this.addArea(yaan)
        // this.getspotMonitor()
        // 图片底透明处理
        // this.transparentBack()
        // this.createLabel(this.spot_data)
        // 景点点击事件
        this.spotClick()


        // 天气实况
        // this.getweatherCondition('S9652')

        // 24小时/7天天气预报
        // this.getweatherForecast("马岭镇")


        // 所有景点
        this.getAllSpots()
        // this.areaChange()

        // 条件查询景点
        // this.getSearchSpots()
        // this.initBox3Chart()
        // 预警
        // this.getWarnningList()

        // 气象景观24小时预报
        // this.getLandscape24()
        // 雷达图
        // this.getRadarEcho()


    },
    methods: {
        // 初始化地图
        initMap() {

            this.map = new Map({
                target: "map",
                controls: defaults({
                    zoom: true
                }).extend([]),
                layers: [
                    new TileLayer(
                        {
                            source: new XYZ({
                                className: 'blueLayer',
                                url:
                                    // 高德
                                    'https://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
                                //天地图
                                // 'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
                                tileLoadFunction: function (imageTile, src) {
                                    // 使用滤镜 将白色修改为深色
                                    let img = new Image()
                                    // img.crossOrigin = ''
                                    // 设置图片不从缓存取，从缓存取可能会出现跨域，导致加载失败
                                    img.setAttribute('crossOrigin', 'anonymous')
                                    img.onload = function () {
                                        let canvas = document.createElement('canvas')
                                        let w = img.width
                                        let h = img.height
                                        canvas.width = w
                                        canvas.height = h
                                        let context = canvas.getContext('2d')
                                        context.filter = 'grayscale(100%) invert(100%) sepia(10%) hue-rotate(100deg) saturate(1600%) brightness(80%) contrast(90%)'
                                        context.drawImage(img, 0, 0, w, h, 0, 0, w, h)
                                        imageTile.getImage().src = canvas.toDataURL('image/png')
                                    }
                                    img.src = src
                                },


                            }),

                        },
                        { zoomOffset: 1 }
                    )
                ],
                view: new View({
                    center: fromLonLat([102.741538, 29.909998]),
                    zoom: 9,
                    maxZoom: 15,
                    minZoom: 9,


                }),


            });

            //离线


        },
        // 描边雅安市
        addArea(geo = []) {
            console.log(geo)
            if (geo.length == 0) return false;
            let areaFeature = null;
            // 设置图层
            this.areaLayer = new VectorLayer({
                source: new VectorSource({
                    features: []
                })
            });
            // 添加图层
            this.map.addLayer(this.areaLayer);
            geo[0].features.forEach(g => {

                let lineData = g
                if (lineData.geometry.type == "MultiPolygon") {
                    areaFeature = new Feature({
                        geometry: new MultiPolygon(
                            lineData.geometry.coordinates
                        ).transform("EPSG:4326", "EPSG:3857")
                    });
                } else if (lineData.geometry.type == "Polygon") {
                    areaFeature = new Feature({
                        geometry: new Polygon(
                            lineData.geometry.coordinates
                        ).transform("EPSG:4326", "EPSG:3857")
                    });
                }
                areaFeature.setStyle(
                    new Style({
                        fill: new Fill({ color: "#00b07c30" }),
                        stroke: new Stroke({
                            width: 1,
                            color: [255, 255, 255, 1]
                        })
                    })
                );
                this.areaLayer.getSource().addFeatures([areaFeature]);
            });


        },

        // 1.天气实况
        async getweatherCondition(name) {
            let res = await reqWeatherCondition('', '', name, '', '')
            console.log('天气实况', res.data.data)
            this.WeatherCondition = res.data.data[0]

        },
        // 处理风向格式
        solveWindDirection(num) {
            let windData = [
                {
                    name: '北风',
                    vuale: [0, 11.25]
                },
                {
                    name: '北风',
                    vuale: [348.76, 360]
                },
                {
                    name: '东北东风',
                    vuale: [11.26, 33.75]
                },
                {
                    name: '东北风',
                    vuale: [33.76, 56.25]
                },
                {
                    name: '东东北风',
                    vuale: [56.26, 78.75]
                },
                {
                    name: '东风',
                    vuale: [78.76, 101.25]
                },
                {
                    name: '东东南风',
                    vuale: [101.26, 123.75]
                },
                {
                    name: '东南风',
                    vuale: [123.76, 146.25]
                },
                {
                    name: '南东南风',
                    vuale: [146.26, 168.75]
                },
                {
                    name: '南风',
                    vuale: [168.76, 191.25]
                },

                {
                    name: '南西南风',
                    vuale: [191.26, 213.75]
                },
                {
                    name: '西南风',
                    vuale: [213.76, 236.25]
                },
                {
                    name: '西西南风',
                    vuale: [236.26, 258.75]
                },
                {
                    name: '西风',
                    vuale: [258.76, 281.25]
                },
                {
                    name: '西西北风',
                    vuale: [281.26, 303.75]
                },
                {
                    name: '西北风',
                    vuale: [303.76, 336.25]
                },
                {
                    name: '北西北风',
                    vuale: [336.26, 348.75]
                },
            ]
            return windData.find(_ => num >= _.vuale[0] && num <= _.vuale[1]).name
        },

        // 2.景区实景
        async getspotMonitor(lat, lon) {
            let res = await reqMonitor(lat, lon, '1', '2', '0', false)
            console.log('监控', res.data)
            this.monitor_url = res.data.data.playUrl
            this.loadMonitor(this.monitor_url)
        },
        // 加载监控
        loadMonitor(val) {
            var videoElement = this.$refs.videosmallone; // 获取到html中的video标签  
            this.currentUrl = val; // 保存当前流的URL  

            if (flvjs.isSupported()) {
                if (this.player !== null) {
                    console.log('Destroying existing player...');

                    // 清除事件监听器  
                    if (this.errorListener) {
                        this.player.off(flvjs.Events.ERROR, this.errorListener);
                    }
                    if (this.mediaInfoListener) {
                        this.player.off(flvjs.Events.MEDIA_INFO, this.mediaInfoListener);
                    }

                    // 销毁播放器  
                    this.player.pause();
                    this.player.unload();
                    this.player.detachMediaElement();
                    this.player.destroy();
                    this.player = null;
                }

                try {
                    // 定义事件处理函数  
                    this.errorListener = (errorType, errorDetails) => {
                        if (errorType === flvjs.ErrorTypes.DEMUX_ERROR
                            && errorDetails === flvjs.ErrorDetails.DEMUX_CODECID_UNSUPPORTED) {

                            const currentTime = Date.now();
                            // 进行节流控制，只在指定的时间间隔内输出错误  
                            if (currentTime - this.lastErrorTimestamp >= this.errorThrottleInterval) {
                                console.error('Error detected: Unsupported codec');
                                this.lastErrorTimestamp = currentTime; // 更新上次错误输出时间  
                            }

                            // 增加错误计数  
                            this.errorCount++;

                            // 超过最大错误次数后，停止播放器或做其他处理  
                            if (this.errorCount >= this.maxErrors) {
                                console.warn(`Reached maximum error count (${this.maxErrors}). Stopping player.`);
                                this.player.pause(); // 停止播放器  
                                this.player.unload(); // 卸载播放器  
                                return; // 不再执行后续播放逻辑  
                            }
                        }
                    };

                    this.mediaInfoListener = (info) => {
                        const videoCodec = info.videoCodec;
                        if (videoCodec && videoCodec === 'unknown codec type') {
                            console.warn('Detected unsupported codec type');
                        }
                    };

                    // 创建直播流，加载到 DOM 中去  
                    this.player = flvjs.createPlayer(
                        {
                            type: "flv",
                            url: val, // 你的url地址  
                            isLive: true,
                            hasAudio: false,
                            hasVideo: true,
                            enableStashBuffer: true,
                        },
                        {
                            enableWorker: false,
                            enableStashBuffer: false,
                            autoCleanupSourceBuffer: true,
                            lazyLoad: false,
                        }
                    );

                    // 注册事件监听器  
                    this.player.on(flvjs.Events.ERROR, this.errorListener);
                    this.player.on(flvjs.Events.MEDIA_INFO, this.mediaInfoListener);

                    // 将播放器和视频元素绑定  
                    this.player.attachMediaElement(videoElement);
                    this.player.load(); // 准备完成  

                    // 延时播放以确保加载完成  
                    setTimeout(() => {
                        this.player.play().catch((error) => {
                            console.error('Error while attempting to play:', error);
                        });
                    }, 500);

                } catch (error) {
                    console.error('An error occurred while initializing the FLV player:', error);
                }
            }

        },



        // 3.旅游指数
        async getTourismIndex(dsid) {
            let res = await reqTourismIndex(dsid)
            this.tourismIndexData = res.data.data
        },



        // 4.选择,搜索功能

        // 搜索功能-地区改变
        async areaChange() {
            this.spot = ''
            console.log(this.area)
            let res = await reqSearchSpots({
                scenicName: '',//景点名称
                county: this.area,//区县
                keyword: '',//关键字
                scenicClass: ''
            })
            this.spotOptions = res.data.data
        },

        // 搜索功能-景区改变
        spotChange() {
            this.getAllSpots()
            this.search_spot = this.spotOptions.filter((item) => {
                return item.scenicName === this.spot
            })[0]
            console.log(this.search_spot)
            // 1. 聚焦到某经纬度
            this.map.getView().animate({
                zoom: 13, // 地图层级
                center: fromLonLat([this.search_spot.lon, this.search_spot.lat]), // 聚焦位置
                duration: 1000, // 过渡时间

            })


        },

        // 搜索功能-搜索
        async searchSpot() {
            // this.search = ''
            this.getAllSpots()
            let res = await reqSearchSpots({
                scenicName: '',//景点名称
                county: '',//区县
                keyword: this.search,//关键字
                scenicClass: ''
            })
            if (!res.data.data) {
                this.$message.error(res.data.msg)
            } else {
                this.search_spot = res.data.data[0]
                // 1. 聚焦到某经纬度
                this.map.getView().animate({
                    zoom: 13, // 地图层级
                    center: fromLonLat([this.search_spot.lon, this.search_spot.lat]), // 聚焦位置
                    duration: 1000, // 过渡时间

                })
            }
        },


        // 5.图层
        // 5.1.景区

        // 改变景区等级
        changeLevel(level) {

            this.spot_level = level
            this.getSearchSpots()
            this.img_type = ''
            this.map.getView().animate({
                zoom: 9, // 地图层级
                center: fromLonLat([102.741538, 29.909998]), // 聚焦位置
                duration: 1000, // 过渡时间

            })
        },
        // 添加标注
        // 全部
        createAllLabel(data) {
            // 删除覆盖物
            this.map.removeLayer(this.currentLayer);
            // 删除点
            this.map.removeLayer(this.currentPoints);
            // 删除框
            this.removeAllOverlays()
            const source = new Vector(); // 初始化矢量数据源

            data.forEach((item) => {
                let marker
                if (item.scenicClass === '3A') {
                    marker = '3A景区'
                } else if (item.scenicClass === '4A') {
                    marker = '4A景区'

                } else if (item.scenicClass === '5A') {
                    marker = '5A景区'

                } else {
                    marker = '其他景区'
                }

                const feature = new Feature({
                    geometry: new OlGeomPoint(fromLonLat([+item.lon, +item.lat])),
                    name: item.scenicName,
                    img: require(`@/assets/travel/${marker}.svg`),
                    type: 'spot',
                    dsid: item.dsid
                });
                feature.setId(item.dsid);
                feature.setStyle(this.createLabelStyle(feature));

                source.addFeature(feature); // 将标签要素添加至矢量数据源

            });
            this.currentLayer = new Vectors({               // 创建矢量图层
                source: source,
                zIndex: 999
            })

            this.map.addLayer(this.currentLayer)              // 将矢量图层添加至地图


        },
        // 5A
        create5ALabel(data) {

            // 删除覆盖物
            this.map.removeLayer(this.currentLayer);
            // 删除点
            this.map.removeLayer(this.currentPoints);
            // 删除框
            this.removeAllOverlays()
            const source = new Vector(); // 初始化矢量数据源

            data.forEach((item) => {


                const feature = new Feature({
                    geometry: new OlGeomPoint(fromLonLat([+item.lon, +item.lat])),
                    name: item.scenicName,
                    img: require(`@/assets/travel/5A景区.svg`),
                    type: 'spot',
                    dsid: item.dsid
                });
                feature.setId(item.dsid);
                feature.setStyle(this.createLabelStyle(feature));

                source.addFeature(feature); // 将标签要素添加至矢量数据源

            });
            this.currentLayer = new Vectors({               // 创建矢量图层
                source: source,
                zIndex: 999
            })

            this.map.addLayer(this.currentLayer)              // 将矢量图层添加至地图
        },
        // 4A
        create4ALabel(data) {
            // 删除覆盖物
            this.map.removeLayer(this.currentLayer);
            // 删除点
            this.map.removeLayer(this.currentPoints);
            // 删除框
            this.removeAllOverlays()
            const source = new Vector(); // 初始化矢量数据源

            data.forEach((item) => {


                const feature = new Feature({
                    geometry: new OlGeomPoint(fromLonLat([+item.lon, +item.lat])),
                    name: item.scenicName,
                    img: require(`@/assets/travel/4A景区.svg`),
                    type: 'spot',
                    dsid: item.dsid
                });
                feature.setId(item.dsid);
                feature.setStyle(this.createLabelStyle(feature));

                source.addFeature(feature); // 将标签要素添加至矢量数据源

            });
            this.currentLayer = new Vectors({               // 创建矢量图层
                source: source,
                zIndex: 999
            })

            this.map.addLayer(this.currentLayer)              // 将矢量图层添加至地图
        },
        // 3A
        create3ALabel(data) {
            // 删除覆盖物
            this.map.removeLayer(this.currentLayer);
            // 删除点
            this.map.removeLayer(this.currentPoints);
            // 删除框
            this.removeAllOverlays()
            const source = new Vector(); // 初始化矢量数据源

            data.forEach((item) => {


                const feature = new Feature({
                    geometry: new OlGeomPoint(fromLonLat([+item.lon, +item.lat])),
                    name: item.scenicName,
                    img: require(`@/assets/travel/3A景区.svg`),
                    type: 'spot',
                    dsid: item.dsid
                });
                feature.setId(item.dsid);
                feature.setStyle(this.createLabelStyle(feature));

                source.addFeature(feature); // 将标签要素添加至矢量数据源

            });
            this.currentLayer = new Vectors({               // 创建矢量图层
                source: source,
                zIndex: 999
            })

            this.map.addLayer(this.currentLayer)              // 将矢量图层添加至地图
        },
        // 其他景区
        createOtherLabel(data) {
            // 删除覆盖物
            this.map.removeLayer(this.currentLayer);
            // 删除点
            this.map.removeLayer(this.currentPoints);
            // 删除框
            this.removeAllOverlays()
            const source = new Vector(); // 初始化矢量数据源

            data.forEach((item) => {


                const feature = new Feature({
                    geometry: new OlGeomPoint(fromLonLat([+item.lon, +item.lat])),
                    name: item.scenicName,
                    img: require(`@/assets/travel/其他景区.svg`),
                    type: 'spot',
                    dsid: item.dsid
                });
                feature.setId(item.dsid);
                feature.setStyle(this.createLabelStyle(feature));

                source.addFeature(feature); // 将标签要素添加至矢量数据源

            });
            this.currentLayer = new Vectors({               // 创建矢量图层
                source: source,
                zIndex: 999
            })

            this.map.addLayer(this.currentLayer)              // 将矢量图层添加至地图
        },
        // 标注样式
        createLabelStyle(feature) {
            //返回一个样式
            return new OlStyleStyle({
                //图标样式
                image: new OlStyleIcon({
                    anchor: [10, 18],      //设置图标偏移
                    scale: 0.6,      // 图标缩小显示
                    anchorOrigin: 'top-right',     //标注样式的起点位置
                    anchorXUnits: 'pixels',    //X方向单位：分数
                    anchorYUnits: 'pixels',     //Y方向单位：像素
                    offsetOrigin: 'bottom-left',   //偏移起点位置的方向
                    opacity: 0.9,    //透明度
                    src: feature.get('img')     //图片路径
                }),
                //文本样式
                text: new Text({
                    textAlign: 'center',     //对齐方式
                    textBaseline: 'middle',    //文本基线
                    font: 'normal 12px 微软雅黑',     //字体样式
                    text: feature.get('name'),    //文本内容
                    offsetY: -25,    // Y轴偏置
                    fill: new Fill({        //填充样式
                        color: '#000',

                    }),
                    backgroundFill: new Fill({      // 填充背景
                        color: 'white',

                    }),

                    padding: [2, 5, 2, 5],
                }),
                // 设置层级
                zIndex: 199
            });
        },
        // 点击景点
        spotClick() {

            this.map.on('click', (evt) => {
                var pixel = this.map.getEventPixel(evt.originalEvent);
                var feature = this.map.forEachFeatureAtPixel(pixel, (feature, layer) => {
                    return feature;
                });

                if (feature) {
                    // var coordinates = feature.getGeometry().getCoordinates();
                    // 检查feature的type属性
                    if (feature.get('type') && feature.get('type') === 'spot') { // 更改为你自己生成的marker类型
                        this.clickArea = feature.get('name')
                        // overlay.setPosition(coordinates);
                        // this.map.addOverlay(overlay);

                        // 改变选中的旅游景点
                        this.select_spot_id = feature.get('dsid')

                        // 筛选选中的景区
                        this.select_spot = this.spot_data.filter((item) => {
                            return item.dsid === this.select_spot_id
                        })[0]
                        console.log('点击的景区', this.select_spot)

                        // 重新获取各项数据
                        this.getTourismIndex(this.select_spot.dsid)
                        this.getweatherForecast(this.select_spot.town)
                        this.getweatherCondition(this.select_spot.scenicName)
                        this.getSpotIntroduction(this.select_spot.scenicName)
                        this.getLandscape24(this.select_spot.scenicName)
                        this.getspotMonitor(this.select_spot.lat, this.select_spot.lon)
                        // 1. 聚焦到某经纬度
                        this.map.getView().animate({
                            zoom: 13, // 地图层级
                            center: fromLonLat([this.select_spot.lon, this.select_spot.lat]), // 聚焦位置
                            duration: 1000, // 过渡时间

                        })
                    }


                }

            });

            // popupCloser.addEventListener('click', () => {
            //     overlay.setPosition(undefined)
            // })
            // 鼠标移上地图变手
            this.map.on('pointermove', e => {
                this.map.getTargetElement().style.cursor = 'pointer'
            });


        },
        // 获取所有景区
        async getAllSpots() {
            let res = await reqAllSpots()
            console.log('所有景点', res.data.data)

            this.spot_data = res.data.data
            this.createAllLabel(this.spot_data)
            this.select_spot = this.spot_data.filter((item) => {
                return item.scenicName === '碧峰峡'
            })[0]
            console.log(this.select_spot)


            // 默认获取碧峰峡数据
            //  旅游指数
            this.getTourismIndex("311803000003")
            // 景区简介
            this.getSpotIntroduction('碧峰峡')
            // 气象景观24小时预报
            this.getLandscape24('碧峰峡')
            //   天气实况
            this.getweatherCondition('碧峰峡')
            // 精细化预报
            this.getweatherForecast("碧峰镇")
            // 景区监控
            this.getspotMonitor('30.07556678', '102.99098998')


            res.data.data.forEach((item) => {
                let rain = {
                    name: item.scenicName,
                    coords: [item.lon, item.lat],
                    data: item.rainLiveWithCoordinate
                }
                let temp = {
                    name: item.scenicName,
                    coords: [item.lon, item.lat],
                    data: item.temperatureLiveWithCoordinate
                }

                this.spots_rain_station.push(rain)
                this.spots_temp_station.push(temp)
            })
            console.log('降雨和气温', this.spots_rain_station, this.spots_temp_station)


        },
        // 条件查询景区
        async getSearchSpots() {
            let res = await reqSearchSpots({
                scenicName: '',//景点名称
                county: '',//区县
                keyword: '',//关键字
                scenicClass: this.spot_level
            })
            this.spot_data = res.data.data

            if (this.spot_level === '5A') {
                this.spot_5A_data = this.spot_data
                this.create5ALabel(this.spot_5A_data)
                // this.select_spot = this.spot_5A_data[0]

            }
            if (this.spot_level === '4A') {
                this.spot_4A_data = this.spot_data
                this.create4ALabel(this.spot_4A_data)
                // this.select_spot = this.spot_4A_data[0]

            }
            if (this.spot_level === '3A') {
                this.spot_3A_data = this.spot_data
                this.create3ALabel(this.spot_3A_data)
                // this.select_spot = this.spot_3A_data[0]

            }
            if (this.spot_level === 'other') {
                this.spot_other_data = this.spot_data
                this.createOtherLabel(this.spot_other_data)
                // this.select_spot = this.spot_other_data[0]

            }





        },

        // 5.2.图层
        // 改变降雨，气温...图层类型
        changeType(type) {
            this.img_type = type
            console.log(this.img_type)
            // 获取数据
            this.getLayer()
            this.spot_level = ''
        },
        // 图层数据请求
        async getLayer() {
            // 雨量
            if (this.img_type === 'yl-min') {
                // let res = await reqRainLayer('', '', '1h')
                // this.layerData = res.data.data
                // this.transparentBack('雨量')
                this.spotRainLabel(this.spots_rain_station, 'rainMinute')
            }
            if (this.img_type === 'yl-12') {
                // let res = await reqRainLayer('', '', '12h')
                // this.layerData = res.data.data
                // this.rainFallLayer()
                this.spotRainLabel(this.spots_rain_station, 'rain12h')
            }
            if (this.img_type === 'yl-1') {
                // let res = await reqRainLayer('', '', '1h')
                // this.layerData = res.data.data
                // this.rainFallLayer()
                this.spotRainLabel(this.spots_rain_station, 'rain1h')
            }
            if (this.img_type === 'yl-24') {
                // let res = await reqRainLayer('', '', '24h')
                // this.layerData = res.data.data
                // this.rainFallLayer()
                this.spotRainLabel(this.spots_rain_station, 'rain24h')
            }

            // 气温
            if (this.img_type === 'qw-ss') {
                // let res = await reqTempLayer('', '', 'minute')
                // this.layerData = res.data
                // this.TempLayer()
                this.spotTempLabel(this.spots_temp_station, 'dqqw')
            }
            if (this.img_type === 'qw-rg') {
                // let res = await reqTempLayer('', '', 'max')
                // this.layerData = res.data
                // this.TempLayer()
                this.spotTempLabel(this.spots_temp_station, 'dtzg')
            }
            if (this.img_type === 'qw-rd') {
                // let res = await reqTempLayer('', '', 'min')
                // this.layerData = res.data
                // this.TempLayer()
                this.spotTempLabel(this.spots_temp_station, 'dtzd')
            }
            if (this.img_type === 'qw-24') {
                // let res = await reqTempLayer('', '', 'subtract')
                // this.layerData = res.data
                // this.TempLayer()
                this.spotTempLabel(this.spots_temp_station, 'temperatureChange24h')
            }

            // 气象景观
            if (this.img_type === 'qxjg-rc') {
                this.getLandscape('日出')

            }
            if (this.img_type === 'qxjg-rl') {
                this.getLandscape('日落')
            }
            if (this.img_type === 'qxjg-yh') {
                this.getLandscape('云海')
            }
            if (this.img_type === 'qxjg-xk') {
                this.getLandscape('星空')
            }

            if (this.img_type === 'yjxh') {
                this.getWarnningList('预警信号')
            }
            if (this.img_type === 'qxyj') {
                this.getWarnningList('预警')
            }
        },
        // 雨量分布图
        rainFallLayer() {
            // 移除当前图层
            if (this.currentLayer) {
                this.map.removeLayer(this.currentLayer);
            }
            // 2.叠加图
            // 计算扩展范围
            // const extent = [101.836303, 28.741122, 103.502488, 31.041223];
            const extent = [101.83724834208186, 28.750917474649338, 103.49246370747355, 31.041276301224034]

            var projection = new Projection({
                code: 'EPSG:4326',
                extent: extent
            });
            this.currentLayer = new ImageLayer({
                source: new ImageStatic({
                    url: this.resultImage,
                    projection: projection,
                    imageExtent: extent,
                    zoom: 9,

                })
            });


            this.map.addLayer(this.currentLayer); // 添加雨量图层


        },
        // 标注颜色样式
        labelStyle(type, value) {

            if (type === 'rain') {
                if (value < 25) {
                    return 'rgba(0, 0, 0, 0.8)';
                } else if (value >= 25 && value < 50) {
                    return 'rgba(135, 240, 255, 0.8)';
                } else if (value >= 50 && value < 100) {
                    return 'rgba(0, 220, 255, 0.8)';
                } else if (value >= 100 && value < 250) {
                    return 'rgba(237, 77, 77, 0.8)';
                } else {
                    return 'rgba(176, 104, 255, 0.8)';
                }
            }
            if (type === 'temp') {
                if (this.img_type === 'qw-24') {
                    if (-8 <= value && value <= -4) {
                        return 'rgba(0, 255 ,255, 0.8)'   //蓝色

                    } else if (-4 < value && value <= 0) {
                        return 'rgba(127 ,255, 0, 0.8)'   //绿色

                    } else if (0 < value) {
                        return 'rgba(238 ,92 ,66, 0.8)'   //红色

                    }

                } else {
                    if (value <= 3) {
                        return 'rgba(0, 255 ,255, 0.8)'  //蓝色

                    } else if (3 < value && value <= 20) {
                        return 'rgba(79, 79, 79, 0.8)'   //黑色

                    } else if (20 < value && value <= 30) {

                        return 'rgba(127 ,255, 0, 0.8)' // 绿色

                    } else if (30 < value && value <= 35) {

                        return 'rgba(238, 238, 0, 0.8)' //  黄色

                    } else if (35 < value && value <= 37) {

                        return 'rgba(255, 140, 0, 0.8)'// 橙色
                    } else if (37 < value) {
                        return 'rgba(238 ,92 ,66, 0.8)'// 红色

                    }

                }
            }
        },
        // 景区降雨标注
        spotRainLabel(data, type) {
            // 删除覆盖物
            this.map.removeLayer(this.currentLayer);
            // 删除点
            this.map.removeLayer(this.currentPoints);
            // 删除框
            this.removeAllOverlays()

            // 添加具体景点雨量标注
            const vectorSource = new VectorSource();

            this.currentPoints = new VectorLayer({
                source: vectorSource,
            });
            this.map.addLayer(this.currentPoints)


            data.forEach((station) => {
                const feature = new Feature({
                    geometry: new Point(fromLonLat(station.coords)),
                    rainfall: station.data[type],
                });

                feature.setStyle(
                    new Style({
                        image: new Circle({
                            radius: 7,
                            fill: new Fill({ color: this.labelStyle('rain', station.data[type]) }),
                            stroke: new Stroke({ color: 'white', width: 2 }),
                        }),
                    })
                );

                vectorSource.addFeature(feature);

                // const overlays = [];
                // 创建信息框 overlay
                const overlay = new Overlay({
                    element: this.$refs.info.cloneNode(true),
                    positioning: 'bottom-center',
                    stopEvent: false,
                });

                this.map.addOverlay(overlay);

                this.overlays.push(overlay);


                // 设置信息框内容并显示
                // overlay.getElement().innerHTML = '雨量: ' + station.rainfall;
                // overlay.setPosition(fromLonLat(station.coords));
                // overlay.getElement().style.display = 'block';

                overlay.getElement().innerHTML =
                    `<span>${station.name}</span></br><span>${station.data[type]}mm</span>`;
                overlay.getElement().style.backgroundColor = this.labelStyle('rain', station.data[type])
                overlay.getElement().style.color = 'white'
                overlay.setPosition(fromLonLat(station.coords));
                overlay.getElement().style.display = 'block';
            });

        },
        // 移除框
        removeAllOverlays() {
            this.overlays.forEach(overlay => {
                this.map.removeOverlay(overlay); // 删除每个 overlay
            });
            this.overlays = []; // 清空数组
        },
        // 景区气温标注
        spotTempLabel(data, type) {
            // 删除覆盖物
            this.map.removeLayer(this.currentLayer);
            // 删除点
            this.map.removeLayer(this.currentPoints);
            // 删除框
            this.removeAllOverlays()

            // 添加具体景点气温标注
            const vectorSource = new VectorSource();
            this.currentPoints = new VectorLayer({
                source: vectorSource,
            });
            this.map.addLayer(this.currentPoints)


            data.forEach((station) => {
                const feature = new Feature({
                    geometry: new Point(fromLonLat(station.coords)),
                    temp: station.data[type],
                });

                feature.setStyle(
                    new Style({
                        image: new Circle({
                            radius: 7,
                            fill: new Fill({ color: this.labelStyle('temp', station.data[type]) }),
                            stroke: new Stroke({ color: 'white', width: 2 }),
                        }),
                    })
                );

                vectorSource.addFeature(feature);

                // 创建信息框 overlay
                const overlay = new Overlay({
                    element: this.$refs.info.cloneNode(true),
                    positioning: 'bottom-center',
                    stopEvent: false,
                });

                this.map.addOverlay(overlay);
                this.overlays.push(overlay);

                overlay.getElement().innerHTML = `<span>${station.name}</span></br><span>${station.data[type]}℃</span>`;
                overlay.getElement().style.backgroundColor = this.labelStyle('temp', station.data[type])
                overlay.getElement().style.color = 'white'
                overlay.setPosition(fromLonLat(station.coords));
                overlay.getElement().style.display = 'block';
            });


        },
        // 气温分布图
        TempLayer() {
            this.spotTempLabel()
            // 1.点

            // 样式
            // const getStyle = (temperature) => {
            //     const canvas = document.createElement('canvas');
            //     const context = canvas.getContext('2d');

            //     // 根据雨量设置画布的大小和颜色止损
            //     const size = 25 + (temperature / 5); // 根据雨量调整画布大小
            //     canvas.width = size;
            //     canvas.height = size;

            //     // 创建渐变
            //     const gradient = context.createRadialGradient(size / 2, size / 2, 0, size / 2, size / 2, size / 2);


            //     if (this.img_type === 'qw-24') {
            //         if (-8 < temperature < -4) {
            //             gradient.addColorStop(0, 'rgba(0, 255 ,255, 0.6)');   //蓝色
            //             gradient.addColorStop(1, 'rgba(0 ,255 ,255, 0)');
            //         } else if (-4 < temperature < 0) {
            //             gradient.addColorStop(0, 'rgba(127 ,255, 0, 0.6)'); // 绿色
            //             gradient.addColorStop(1, 'rgba(127, 255, 0, 0)');
            //         } else if (0 < temperature) {

            //             gradient.addColorStop(0, 'rgba(238 ,92 ,66, 0.6)'); // 红色
            //             gradient.addColorStop(1, 'rgba(238 ,92 ,66, 0)'); //
            //         }

            //     }
            //     else {
            //         if (temperature < 3) {
            //             gradient.addColorStop(0, 'rgba(0, 255 ,255, 0.6)');   //蓝色
            //             gradient.addColorStop(1, 'rgba(0 ,255 ,255, 0)');
            //         } else if (3 < temperature < 20) {
            //             gradient.addColorStop(0, 'rgba(79, 79, 79, 0.6)');   //黑色
            //             gradient.addColorStop(1, 'rgba(79, 79, 79, 0)');
            //         } else if (20 < temperature < 30) {

            //             gradient.addColorStop(0, 'rgba(127 ,255, 0, 0.6)'); // 绿色
            //             gradient.addColorStop(1, 'rgba(127, 255, 0, 0)');
            //         } else if (30 < temperature < 35) {

            //             gradient.addColorStop(0, 'rgba(238, 238, 0, 0.6)'); //  黄色
            //             gradient.addColorStop(1, 'rgba(238, 238, 0, 0)');
            //         }
            //         else if (35 < temperature < 37) {

            //             gradient.addColorStop(0, 'rgba(255, 140, 0, 0.6)'); // 橙色
            //             gradient.addColorStop(1, 'rgba(255, 140, 0, 0)'); //
            //         }
            //         else if (37 < temperature) {

            //             gradient.addColorStop(0, 'rgba(238 ,92 ,66, 0.6)'); // 红色
            //             gradient.addColorStop(1, 'rgba(238 ,92 ,66, 0)'); //
            //         }

            //     }


            //     // 填充渐变
            //     context.fillStyle = gradient;
            //     context.beginPath();
            //     context.arc(size / 2, size / 2, size / 2, 0, Math.PI * 2);
            //     context.fill();

            //     // 返回 OpenLayers 样式
            //     return new Style({
            //         image: new Icon({
            //             src: canvas.toDataURL(), // 将 canvas 转换为图像
            //             scale: 2 // 可以根据需要调整比例
            //         }),
            //         stroke: new Stroke({ color: 'black', width: 1 }) // 可以设置边框样式
            //     });
            // }

            // // 创建矢量图层并添加点
            // const features = this.layerData.data.map(data => {
            //     const feature = new Feature({
            //         geometry: new OlGeomPoint(fromLonLat(data.coordinates)),
            //         temperature: data.temperature,
            //         type: 'temperature' // 加上一个类型属性
            //     });
            //     feature.setStyle(getStyle(data.temperature));
            //     return feature;
            // });

            // const vectorSource = new VectorSource({
            //     features: features
            // });


            // this.map.removeLayer(this.rainLayer);
            // this.map.removeLayer(this.tempLayer);
            // this.tempLayer = new VectorLayer({
            //     source: vectorSource
            // });


            // this.map.addLayer(this.tempLayer);
        },
        // 雷达图
        async getRadarEcho() {
            let res = await reqRadarEcho()
            console.log('雷达图', res)
        },
        // 预警
        async getWarnningList(type) {

            let start = new Date()
            start.setFullYear(start.getFullYear() - 1)
            start = moment(start).format('YYYY-MM-DD')
            let end = moment(new Date()).format('YYYY-MM-DD')


            console.log(start, end)
            let res = await reqWarningList(type, '', start, end)
            console.log(res.data)
            // 筛选有用的数据
            let warnning = res.data.data.filter((item) => {
                return item.status === '0'
            })
            // 荥经：102.846537,29.793254

            let data = []
            warnning.forEach((item) => {
                let coords
                if (item.countyName === '荥经') {
                    coords = [102.846537, 29.793254]
                }
                else if (item.countyName === '宝兴') {
                    coords = [102.810689, 30.377429]
                }
                else if (item.countyName === '石棉') {
                    coords = [102.358364, 29.230963]
                }
                else if (item.countyName === '芦山') {
                    coords = [102.933618, 30.145077]
                }
                else if (item.countyName === '名山') {
                    coords = [103.109238, 30.069837]
                }
                else if (item.countyName === '汉源') {
                    coords = [102.650417, 29.344275]
                }
                else if (item.countyName === '天全') {
                    coords = [102.77014, 30.055941]
                }
                else if (item.countyName === '经开') {
                    coords = [103.134475, 30.055428]
                }
                else if (item.countyName === '雅安') {
                    coords = [103.041538, 30.009998]
                }
                else {
                    return
                }
                let obj = {
                    coords,
                    icon: item.picRelaUrl[0]?.picUrl,
                    id: item.id,
                    actionName: item.actionName,
                    alarmName: item.alarmName,
                    countyName: item.countyName,
                    fullName: item.fullName,
                    levelName: item.levelName
                }
                data.push(obj)


            })


            console.log('预警', data)
            this.spotWarnningLabel(data)
        },

        // 预警标注样式
        createWarnningLabelStyle(feature) {
            //返回一个样式
            return new OlStyleStyle({
                //图标样式
                image: new OlStyleIcon({

                    scale: 0.2,      // 图标缩小显示
                    anchorOrigin: 'top-right',     //标注样式的起点位置
                    anchorXUnits: 'pixels',    //X方向单位：分数
                    anchorYUnits: 'pixels',     //Y方向单位：像素
                    offsetOrigin: 'bottom-left',   //偏移起点位置的方向
                    opacity: 0.9,    //透明度
                    src: feature.get('img')     //图片路径
                }),
                //文本样式
                text: new Text({
                    textAlign: 'center',     //对齐方式
                    textBaseline: 'middle',    //文本基线
                    font: 'normal 12px 微软雅黑',     //字体样式
                    text: feature.get('name'),    //文本内容
                    offsetX: 75,    // X轴偏置
                    offsetY: 20,    // Y轴偏置
                    fill: new Fill({        //填充样式
                        color: '#000',

                    }),
                    backgroundFill: new Fill({      // 填充背景
                        color: 'white',
                    }),

                    padding: [2, 5, 2, 5],
                }),
                // 设置层级
                zIndex: 199
            });
        },
        // 检查图片是否有效的函数  
        checkImage(url) {
            return new Promise((resolve) => {
                const img = new Image();
                img.src = url;

                img.onload = () => resolve(true); // 图片加载成功  
                img.onerror = () => resolve(false); // 图片加载失败  
            });
        },
        // 异步渲染feature

        // 预警信号标注
        spotWarnningLabel(data) {

            // 删除覆盖物
            this.map.removeLayer(this.currentLayer);
            // 删除点
            this.map.removeLayer(this.currentPoints);
            // 删除框
            this.removeAllOverlays()
            const source = new Vector(); // 初始化矢量数据源

            data.forEach(async (item) => {

                const defaultIcon = require('@/assets/travel/warnning.svg'); // 定义默认图片路径  
                let iconValid = await this.checkImage(item.icon); // 验证 icon 图片地址  
                console.log(iconValid)
                const feature = new Feature({
                    geometry: new OlGeomPoint(fromLonLat(item.coords)),
                    name: item.fullName,
                    img: iconValid ? item.icon : defaultIcon, // 根据验证结果选择图片  
                    type: 'warning',
                    id: item.id
                });
                feature.setId(item.id);
                feature.setStyle(this.createWarnningLabelStyle(feature));


                source.addFeature(feature); // 将标签要素添加至矢量数据源

            });
            this.currentLayer = new Vectors({               // 创建矢量图层
                source: source,
                zIndex: 999
            })

            this.map.addLayer(this.currentLayer)              // 将矢量图层添加至地图
        },
        // 图片底透明处理
        transparentBack(type) {

            const img = new Image();
            img.crossOrigin = 'Anonymous'; // 允许跨域
            img.src = require('@/assets/travel/layer4.png');

            img.onload = () => {
                const canvas = this.$refs.canvas;
                const ctx = canvas.getContext('2d');

                // 设置 Canvas 尺寸与图片相同
                canvas.width = img.width;
                canvas.height = img.height;

                // 将图像绘制到 Canvas 中
                ctx.drawImage(img, 0, 0);
                const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
                const data = imageData.data;

                // 遍历像素数据，将白色变为透明
                for (let i = 0; i < data.length; i += 4) {
                    const r = data[i];     // 红色
                    const g = data[i + 1]; // 绿色
                    const b = data[i + 2]; // 蓝色

                    // 判断白色区域
                    if (r > 200 && g > 200 && b > 200) {
                        data[i + 3] = 0; // 设置 alpha 值为 0，代表透明
                    }
                }

                // 把处理过的图像数据放回 Canvas
                ctx.putImageData(imageData, 0, 0);

                // 输出为数据 URL
                this.resultImage = canvas.toDataURL('image/png');


                if (type === '雨量') {
                    this.rainFallLayer()
                } else if (type === '气温') {
                    this.TempLayer()
                }

            };

            img.onerror = () => {
                alert('无法加载图像，请检查图片地址是否正确。');
            };


        },


        // 6.景区简介

        async getSpotIntroduction(name) {
            let res = await reqIntroduction('', name)
            this.spot_introduction = res.data.data[0]

        },
        // 7.精细化预报
        // 获取24小时/7天天气预报数据
        async getweatherForecast(town) {
            if (this.forecast === '7') {
                let res = await req7Forecast(town)
                this.WeatherForecast = res.data.data
                console.log('7天天气预报', res)
                this.initBox1Chart(this.forecast)
            } else if (this.forecast === '24') {
                console.log(town)
                let res = await req24Forecast(town)
                this.WeatherForecast = res.data.data
                console.log('24预报', this.WeatherForecast)
                this.initBox1Chart(this.forecast)
            }


        },
        // 预报图表
        initBox1Chart(type) {
            let chartDom = document.getElementById('refinedContent');

            // 设置echarts容器大小，否则初次渲染大小不对
            let myChart = echarts.init(chartDom);
            let option
            // this.WeatherForecast.date
            // this.WeatherForecast.rainfall
            // this.WeatherForecast.temperature
            let option1 = {
                grid: { // 让图表占满容器
                    top: "30px",
                    left: "30px",
                    right: "30px",
                    bottom: "30px"
                },


                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    textStyle: {
                        color: 'white' // 设置图例字体颜色为白色
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.WeatherForecast.date,
                    axisLine: {
                        // x轴线的颜色以及宽度
                        show: true,
                        lineStyle: {
                            color: "white",
                            type: "solid"
                        }
                    },

                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        // y轴线的颜色以及宽度
                        show: true,
                        lineStyle: {
                            color: "white",
                            type: "solid"
                        }
                    },
                    splitLine: {//分割线配置
                        show: true,
                        lineStyle: {
                            color: "#fff",
                        }
                    }

                },
                series: [
                    {
                        name: '雨量',
                        type: 'line',
                        data: this.WeatherForecast.rainfall,
                        // markPoint: {
                        //     data: [
                        //         { type: 'max', name: 'Max' },
                        //         { type: 'min', name: 'Min' }
                        //     ]
                        // },
                        // markLine: {
                        //     data: [{ type: 'average', name: 'Avg' }]
                        // },
                        itemStyle: {
                            color: '#7fd4f5' // 线条颜色
                        },


                    },
                    {
                        name: '气温',
                        type: 'line',
                        data: this.WeatherForecast.temperature,
                        // markPoint: {
                        //     data: [
                        //         { type: 'max', name: 'Max' },
                        //         { type: 'min', name: 'Min' }
                        //     ]
                        // },
                        // markLine: {
                        //     data: [{ type: 'average', name: 'Avg' }]
                        // },
                        itemStyle: {
                            color: '#f64c4d' // 线条颜色
                        },


                    },
                ]
            };



            let option2 = {
                grid: { // 让图表占满容器
                    top: "30px",
                    left: "30px",
                    right: "30px",
                    bottom: "30px"
                },


                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    textStyle: {
                        color: 'white' // 设置图例字体颜色为白色
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.WeatherForecast.date,
                    axisLine: {
                        // x轴线的颜色以及宽度
                        show: true,
                        lineStyle: {
                            color: "white",
                            type: "solid"
                        }
                    },

                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        // y轴线的颜色以及宽度
                        show: true,
                        lineStyle: {
                            color: "white",
                            type: "solid"
                        }
                    },
                    splitLine: {//分割线配置
                        show: true,
                        lineStyle: {
                            color: "#fff",
                        }
                    }
                },
                series: [

                    {
                        name: '白天降雨',
                        type: 'line',
                        data: this.WeatherForecast.weatherDay,
                        // markPoint: {
                        //     data: [
                        //         { type: 'max', name: 'Max' },
                        //         { type: 'min', name: 'Min' }
                        //     ]
                        // },
                        // markLine: {
                        //     data: [{ type: 'average', name: 'Avg' }]
                        // },
                        itemStyle: {
                            color: '#7fd4f5' // 线条颜色
                        },


                    },
                    {
                        name: '夜晚降雨',
                        type: 'line',
                        data: this.WeatherForecast.weatherNight,
                        // markPoint: {
                        //     data: [
                        //         { type: 'max', name: 'Max' },
                        //         { type: 'min', name: 'Min' }
                        //     ]
                        // },
                        // markLine: {
                        //     data: [{ type: 'average', name: 'Avg' }]
                        // },
                        itemStyle: {
                            color: '#282c34' // 线条颜色
                        },


                    },
                    {
                        name: '最高气温',
                        type: 'line',
                        data: this.WeatherForecast.temperatureHighest,
                        // markPoint: {
                        //     data: [
                        //         { type: 'max', name: 'Max' },
                        //         { type: 'min', name: 'Min' }
                        //     ]
                        // },
                        // markLine: {
                        //     data: [{ type: 'average', name: 'Avg' }]
                        // },
                        itemStyle: {
                            color: '#f64c4d' // 线条颜色
                        },


                    },
                    {
                        name: '最低气温',
                        type: 'line',
                        data: this.WeatherForecast.temperatureLowest,
                        // markPoint: {
                        //     data: [
                        //         { type: 'max', name: 'Max' },
                        //         { type: 'min', name: 'Min' }
                        //     ]
                        // },

                        // markLine: {
                        //     data: [{ type: 'average', name: 'Avg' }]
                        // },
                        itemStyle: {
                            color: '#23a9f2' // 线条颜色
                        },


                    },
                ]
            };

            if (type === '24') {

                option = option1

            }
            if (type === '7') {
                option = option2
            }

            myChart.clear()
            option && myChart.setOption(option);
            // 图片根据屏幕大小自适应
            window.onresize = function () {
                myChart.resize();
            }

        },


        // 8.气象景观
        // 获取气象景观数据
        async getLandscape(type) {
            let res = await reqLandscape({
                jsid: '',//景区编号
                begin: '',//开始时间
                end: '',//结束时间
                label: '',//景区名称
                type//景观类型

            })
            this.landscapeData = res.data.list
            console.log('气象景观', this.landscapeData)
            this.landScapeLabel(this.landscapeData, type)



        },
        // 气象景观24小时预报
        async getLandscape24(name) {
            let res = await reqLandscape24(name)
            this.landscape24Data = res.data.list[0]
            console.log('气象景观24小时预报', this.landscape24Data)
            this.initBox3Chart('日出')
        },
        // 气象景观图表
        initBox3Chart(type) {
            let data
            console.log(type)
            if (type === '日落') {
                data = this.landscape24Data.sunsetPercent
            }
            else if (type === '日出') {
                data = this.landscape24Data.sunrisePercent
            }
            else if (type === '云海') {
                data = this.landscape24Data.seacloudsPercent
            }
            else if (type === '星空') {
                data = this.landscape24Data.starPercent
            }
            else if (type === '雪景') {
                data = this.landscape24Data.snowPercent
            }
            let chartDom = document.getElementById('landscapeChart');
            // 设置echarts容器大小，否则初次渲染大小不对
            let myChart = echarts.init(chartDom);
            let option = {
                grid: { // 让图表占满容器
                    top: "30px",
                    left: "40px",
                    right: "20px",
                    bottom: "30px"
                },
                xAxis: {
                    type: 'category',
                    data: ['18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00'],
                    axisLine: {
                        // y轴线的颜色以及宽度
                        show: true,
                        lineStyle: {
                            color: "white",
                            type: "solid"
                        },


                    },
                },
                yAxis: {
                    type: 'value',
                    min: 0,   // Y轴最小值  
                    max: 100, // Y轴最大值 
                    axisLine: {
                        // y轴线的颜色以及宽度
                        show: true,
                        lineStyle: {
                            color: "white",
                            type: "solid"
                        },


                    },
                },
                series: [
                    {
                        data: data,
                        type: 'bar',
                        itemStyle: {
                            // 定义渐变色  
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    { offset: 0, color: '#81C784' }, // 逐渐变色起点（绿色）  
                                    { offset: 1, color: '#4CAF50' }  // 逐渐变色终点（浅绿色）  
                                ],
                                global: false // false: 使用每个图形的局部坐标，否则使用整个画布  
                            }
                        }
                    }
                ]
            };
            option && myChart.setOption(option);


        },
        // 气象景观标注
        landScapeLabel(data, type) {
            let color
            if (type === '日出') {
                color = 'rgba(238,121,66,0.8)'
            }
            else if (type === '日落') {
                color = 'rgba(244,80,0,0.8)'
            }
            else if (type === '云海') {
                color = 'rgba(135,206,255,0.8)'
            }
            else if (type === '星空') {
                color = 'rgba(79,79,79,0.8)'
            }
            // 删除覆盖物
            this.map.removeLayer(this.currentLayer);
            // 删除点
            this.map.removeLayer(this.currentPoints);
            // 删除框
            this.removeAllOverlays()
            // 添加具体景点气象景观标注
            const vectorSource = new VectorSource();
            this.currentPoints = new VectorLayer({
                source: vectorSource,
            });
            this.map.addLayer(this.currentPoints)



            data.forEach((item) => {
                const feature = new Feature({
                    geometry: new Point(fromLonLat([item.lon, item.lat])),
                    jsid: item.jsid,
                });

                feature.setStyle(
                    new Style({
                        image: new Circle({
                            radius: 7,
                            fill: new Fill({ color: color }),
                            stroke: new Stroke({ color: 'white', width: 2 }),
                        }),
                    })
                );

                vectorSource.addFeature(feature);

                // 创建信息框 overlay
                const overlay = new Overlay({
                    element: this.$refs.landscapeinfo.cloneNode(true),
                    positioning: 'bottom-center',
                    stopEvent: false,
                });

                this.map.addOverlay(overlay);
                this.overlays.push(overlay);


                overlay.getElement().innerHTML = `
<span style="font-size: 15px">${item.scenicName}</span>
<table>
    <thead>
        <tr>
            <th>时间</th>
            <th>出现概率</th>
        </tr>
        <tr>
        <td>${item.dateList[0]}</td>
        <td>${item.percentList[0].percent1}%</td>
        </tr>
        <tr>
        <td>${item.dateList[1]}</td>
        <td>${item.percentList[0].percent2}%</td>
        </tr>
        <tr>
        <td>${item.dateList[2]}</td>
        <td>${item.percentList[0].percent3}%</td>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table> `;
                overlay.getElement().style.backgroundColor = color
                overlay.getElement().style.color = 'white'
                overlay.setPosition(fromLonLat([item.lon, item.lat]));
                overlay.getElement().style.display = 'block';
            });


        },



    },
    beforeUnmount() {
        // 在销毁的声明周期中  必须要销毁掉播放器的容器！
        if (this.player) {
            this.player.pause();
            this.player.unload();
            this.player.detachMediaElement();
            this.player.destroy();
            this.player = null;
        }
    },

}
</script>

<style lang="scss" scoped>
:deep(.border-box-content) {
    display: flex;
    justify-content: center;
    align-items: center;
}

:deep(.el-input__inner) {
    background-color: transparent !important;
    border-color: #147946;
    color: #d9d9d9;

}

.info {
    width: 70px;
    height: 50px;
    /* 背景颜色 */
    border: none;
    border-radius: 5px;
    text-align: center;
    line-height: 25px;
    box-sizing: border-box;
    /* 内边距 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    font-size: 13px;
    /* 字体大小 */
    white-space: nowrap;
    transform: translate(0, 68px);


}


.info::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #fff transparent;
}


.landscapeinfo {

    text-align: center;
    line-height: 20px;
    width: auto;
    height: auto;
    /* 背景颜色 */
    border: none;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    /* 内边距 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    font-size: 14px;
    /* 字体大小 */
    white-space: nowrap;
    transform: translate(0, 125px);
}

.landscapeinfo::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #fff transparent;
}

.intropopup {
    width: 100%;
    height: 600px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    overflow: scroll;
    scrollbar-width: none;
    /* firefox */
    -ms-overflow-style: none;
    /* IE 10+ */
    overflow-x: hidden;
    overflow-y: scroll;

    .img {
        width: 450px;
        height: 450px
    }

    .text {
        color: rgb(49, 48, 48);
        font-size: 16px
    }
}


.container {
    width: 100%;
    height: 100%;

    .box {
        padding: 0 10px;
        width: 100%;
        box-sizing: border-box;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left {
            width: 25%;
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;

            // 天气实况
            .weatherCondition {
                width: 90%;
                height: 32%;

                border: 10px solid transparent;

                border-image: url('@/assets/travel/border.png') 20 round;


                .title {
                    width: 100%;
                    height: 15%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    background: url('@/assets/travel/item_title_back.png');
                    background-size: contain;
                    background-repeat: no-repeat;


                    span {
                        font-size: 17px;
                        color: white;
                        letter-spacing: 2px;
                        font-weight: bold;
                        margin: 0 10px;


                    }

                    .spot_title {
                        font-size: 14px;
                        color: white;
                        letter-spacing: 2px;

                    }
                }

                .content {
                    width: 100%;
                    height: 85%;

                    .collect_time {
                        width: 100%;
                        height: 5%;

                        span {
                            color: white;
                            font-size: 18px;
                            display: block;
                            margin: 0 auto;
                            text-align: center
                        }
                    }

                    .detail {
                        width: 100%;
                        height: 95%;
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: space-between;
                        align-items: center;

                        div {
                            width: 45%;
                            height: 50%;
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;

                            span {
                                color: white;
                                font-size: 18px;
                            }
                        }
                    }

                }
            }

            // 景区实景
            .spotReality {
                width: 90%;
                height: 32%;
                border: 10px solid transparent;

                border-image: url('@/assets/travel/border.png') 20 round;


                .title {
                    width: 100%;
                    height: 15%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    background: url('@/assets/travel/item_title_back.png');
                    background-size: contain;
                    background-repeat: no-repeat;

                    span {
                        font-size: 17px;
                        color: white;
                        letter-spacing: 2px;
                        color: white;
                        font-weight: bold;
                        margin: 0 10px;

                    }

                    .spot_title {
                        font-size: 14px;
                        color: white;
                        letter-spacing: 2px;

                    }
                }

                .content {
                    width: 100%;
                    height: 85%;
                    display: flex;
                    flex-wrap: wrap;

                    .videoTitle {
                        width: 100%;
                        height: 20%;


                        display: flex;
                        justify-content: center;
                        align-items: center;

                        span {
                            color: white;
                            font-size: 18px;
                            font-weight: bold
                        }
                    }

                    .monitor {
                        width: 100%;
                        height: 80%;

                        video {
                            width: 100%;
                            height: 120%;
                        }
                    }


                }
            }

            // 旅游指数预报
            .indexForecast {
                width: 90%;
                height: 32%;
                border: 10px solid transparent;

                border-image: url('@/assets/travel/border.png') 20 round;


                .title {
                    width: 100%;
                    height: 15%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    background: url('@/assets/travel/item_title_back.png');
                    background-size: contain;
                    background-repeat: no-repeat;

                    span {
                        font-size: 17px;
                        color: white;
                        letter-spacing: 2px;
                        color: white;
                        font-weight: bold;
                        margin: 0 10px;

                    }

                    .spot_title {
                        font-size: 14px;
                        color: white;
                        letter-spacing: 2px;

                    }
                }

                .content {
                    width: 100%;
                    height: 85%;
                    display: flex;

                    .text {

                        width: 100%;
                        height: 100%;
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: center;
                        align-items: center;

                        span {
                            color: white;
                            font-size: 13px;
                            display: flex;
                            width: 100%;
                            height: 19%;
                            justify-content: flex-start;
                            align-items: center;
                        }
                    }

                }
            }


        }

        .center {
            width: 50%;
            height: 100%;

            box-sizing: border-box;

            .search {
                margin: 0 auto;
                width: 100%;
                height: 5%;
                display: flex;
                justify-content: center;
                align-items: flex-start;
                box-sizing: border-box;
            }

            .map {
                width: 100%;
                height: 98%;


                #map {
                    width: 100%;
                    height: 100%;
                    position: relative;
                    filter: filedrop(NaN) hue-rotate(91deg) invert(0.9) brightness(0.8) saturate(1.5) sepia(0.39) grayscale(1) contrast(3);


                    // #popup-content {
                    //     div {
                    //         width: 200px;
                    //         height: 100px;
                    //         // background-color: rgba($color: #050b32, $alpha: 0.8);
                    //         background-color: white;
                    //         box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
                    //         border-radius: 5px;

                    //     }
                    // }

                    .level {
                        display: flex;
                        justify-content: space-around;
                        align-items: center;
                        background-color: white;
                        width: 300px;
                        height: 50px;
                        position: absolute;
                        top: 5px;
                        right: 5px;
                        z-index: 999;
                        border-radius: 10px;
                        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
                        box-sizing: border-box;

                        span {

                            width: 22%;
                            height: 90%;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            cursor: pointer;
                            font-size: 12px;
                            font-weight: bold;

                            &.active {
                                border-radius: 10px;
                                color: #46a95f;
                                box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
                            }

                        }


                    }

                    .type {
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: space-around;
                        align-items: center;
                        background-color: white;
                        width: 100px;
                        height: 300px;
                        position: absolute;
                        bottom: 5px;
                        right: 5px;
                        z-index: 999;
                        border-radius: 10px;
                        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
                        box-sizing: border-box;

                        span {

                            width: 95%;
                            height: 16%;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            cursor: pointer;
                            font-size: 12px;
                            font-weight: bold;
                            position: relative;

                            &.active {
                                border-radius: 10px;
                                color: #46a95f;
                                box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;

                            }

                            img {
                                width: 25px;
                                height: 25px;
                                margin: 0 5px;
                            }

                            .type_rain {
                                position: absolute;
                                left: -85px;
                                top: 0;
                                display: flex;
                                flex-wrap: wrap;
                                justify-content: space-around;
                                align-items: center;
                                background-color: white;
                                width: 80px;
                                height: 150px;
                                z-index: 999;
                                border-radius: 10px;
                                box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
                                box-sizing: border-box;


                                span {

                                    width: 95%;
                                    height: 24%;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    cursor: pointer;
                                    font-size: 12px;
                                    font-weight: bold;
                                    color: black;

                                    &.active {
                                        border-radius: 10px;
                                        color: #46a95f;
                                        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
                                    }


                                }
                            }

                            .type_temp {
                                position: absolute;
                                left: -85px;
                                top: 0;
                                display: flex;
                                flex-wrap: wrap;
                                justify-content: space-around;
                                align-items: center;
                                background-color: white;
                                width: 80px;
                                height: 150px;
                                z-index: 999;
                                border-radius: 10px;
                                box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
                                box-sizing: border-box;


                                span {

                                    width: 95%;
                                    height: 24%;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    cursor: pointer;
                                    font-size: 12px;
                                    font-weight: bold;
                                    color: black;

                                    &.active {
                                        border-radius: 10px;
                                        color: #46a95f;
                                        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
                                    }


                                }
                            }

                            .type_land {
                                position: absolute;
                                left: -85px;
                                top: -100px;
                                display: flex;
                                flex-wrap: wrap;
                                justify-content: space-around;
                                align-items: center;
                                background-color: white;
                                width: 80px;
                                height: 150px;
                                z-index: 999;
                                border-radius: 10px;
                                box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
                                box-sizing: border-box;


                                span {

                                    width: 95%;
                                    height: 24%;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    cursor: pointer;
                                    font-size: 12px;
                                    font-weight: bold;
                                    color: black;

                                    &.active {
                                        border-radius: 10px;
                                        color: #46a95f;
                                        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
                                    }


                                }
                            }
                        }
                    }


                }
            }
        }

        .right {
            width: 25%;
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;

            // 景区简介
            .introduction {
                position: relative;
                width: 90%;
                height: 32%;
                border: 10px solid transparent;
                border-image: url('@/assets/travel/border.png') 20 round;

                .title {
                    width: 100%;
                    height: 15%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    background: url('@/assets/travel/item_title_back.png');
                    background-size: contain;
                    background-repeat: no-repeat;


                    span {
                        font-size: 17px;
                        color: white;
                        letter-spacing: 2px;
                        font-weight: bold;
                        margin: 0 10px;


                    }

                    .spot_title {
                        font-size: 14px;
                        color: white;
                        letter-spacing: 2px;

                    }
                }

                .content {
                    padding: 10px;
                    box-sizing: border-box;
                    width: 100%;
                    height: 85%;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    .img {
                        width: 200px;
                        height: 200px;
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: center;
                        align-items: center;
                    }

                    .text {
                        width: 50%;
                        height: 100%;
                        padding: 10px;
                        box-sizing: border-box;


                        span {

                            box-sizing: border-box;
                            width: 100%;
                            height: 95%;
                            color: white;
                            font-size: 14px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            -webkit-line-clamp: 10;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                        }

                        .more {
                            width: 100%;
                            height: 5%;
                            display: flex;
                            font-weight: bold;
                            justify-content: flex-end;
                            align-items: center;
                            cursor: pointer;

                        }
                    }


                }


            }


            // 精细化预报

            .refinedForecast {
                width: 90%;
                height: 32%;
                border: 10px solid transparent;

                border-image: url('@/assets/travel/border.png') 20 round;


                .title {
                    width: 100%;
                    height: 15%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    background: url('@/assets/travel/item_title_back.png');
                    background-size: contain;
                    background-repeat: no-repeat;


                    span {
                        font-size: 17px;
                        color: white;
                        letter-spacing: 2px;
                        font-weight: bold;
                        margin: 0 10px;


                    }

                    .spot_title {
                        font-size: 14px;
                        color: white;
                        letter-spacing: 2px;

                    }
                }

                .content {
                    width: 100%;
                    height: 85%;
                    display: flex;
                    flex-wrap: wrap;


                    #refinedContent {
                        width: 100%;
                        height: 100%;
                        z-index: 999;
                    }


                }
            }

            // 气象景观预报
            .landscapeForecast {
                width: 90%;
                height: 32%;
                border: 10px solid transparent;

                border-image: url('@/assets/travel/border.png') 20 round;


                .title {
                    width: 100%;
                    height: 15%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    background: url('@/assets/travel/item_title_back.png');
                    background-size: contain;
                    background-repeat: no-repeat;


                    span {
                        font-size: 17px;
                        color: white;
                        letter-spacing: 2px;
                        font-weight: bold;
                        margin: 0 10px;


                    }

                    .spot_title {
                        font-size: 14px;
                        color: white;
                        letter-spacing: 2px;

                    }
                }

                .content {
                    width: 100%;
                    height: 85%;
                    display: flex;
                    flex-wrap: wrap;



                    #landscapeChart {
                        width: 100%;
                        height: 100%;
                    }


                }
            }


        }
    }
}
</style>